reactjs - 静态和动态路径之间的反应路由

Question

这是我的代码，但它总是跳过“/products/:qfpp”并路由到“/:makeName/:modelName”。我不知道如何解决它，所以，请你帮我解决这个问题。

import React, { Component } from 'react';
import './App.css';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Header from './Components/Header';
import ProductList from './Components/ProductList';
import ModelList from './Components/ModelList'
import CategoryList from './Components/CategoryList';
import ProductDetail from './Components/ProductDetail';


class App extends Component {
render() {
return (
  <div className="App">
    <Router>
      <div>
      <Header />
       <Switch>
        <Route path="/:makeName" exact render={(props)=><ModelList url= 
  {props.match.params.makeName} />}/>

        <Route path="/:makeName/:modelName" exact render={(props)=> 
          <CategoryList makeName={props.match.params.makeName}                                                                           
          modelName={props.match.params.modelName}/>}/>

        <Route path="/:makeName/:modelName/:catName" exact render={(props)=> 
          <ProductList makeName={props.match.params.makeName}                                                                                        
          modelName={props.match.params.modelName}                                                                                         
          catName={props.match.params.catName} />}/>

        <Route path="/products/:qfpp" exact render={(props) => 
          <ProductDetail url={props.match.params.qfpp}/>}/>

        </Switch>
      </div>
    </Router>
  </div>
   );
  }
}

export default App;

Answer 1

What version of react router do you have? Did you check your components for this routes, maybe this components are causing problems. You can check your app with divs instead of components here: https://stackblitz.com/edit/react-h7kwp2