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

您有什么版本的React Router？您是否检查了此路线的组件，可能是这些组件引起了问题。您可以在此处使用div而不是组件来检查您的应用：https://stackblitz.com/edit/react-h7kwp2

在静态和动态路径之间反应路由

1 个答案: