Реактивная маршрутизация среди статического и динамического пути

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

Какая у вас версия реагирующего роутера? Вы проверили свои компоненты для этих маршрутов, возможно, эти компоненты вызывают проблемы. Вы можете проверить свое приложение с помощью div вместо компонентов здесь: https://stackblitz.com/edit/react-h7kwp2

Answer 2

В таком случае это нормально, если ваш роутер видит маршрут/products/my-idэто можно решить:

• products"=":makeName
• my-id"=":modelName

Вы должны объявить маршрут раньше, тогда маршрутизатор будет использовать этот маршрут./products/:qfppвместо/:makeName/:modelName

      <Switch>
    <Route path="/products/:qfpp"/>
    <Route path="/:makeName/:modelName"/>
</Switch>