React路由器中的多个参数

Question

我的应用程序使用一个参数- id就可以很好地工作。如何在路由中添加更多参数，例如，园区、主题等？

 const Routing = () => ( 
    <HashRouter>
      <Route path='/course/:id' component={Parameters} /> 
      <Route path='/course/:CAMPUS_NAME' component={Campus} />
      <Route  path="/" component={App} />
    </HashRouter>
  </>
);

export default Routing;

Parameters.js

...
componentDidMount(){
              const {id} = this.props.match.params.id ;            
                this.runSearch();          
  }
...

Answer 1

您可以使用以下方法将path属性修改为

path="/course/:id/:campus/:subject"

在有可选参数的情况下，尝试如下所示

path="/course/:id?/:campus?/:subject

要访问相同的内容，可以使用

this.props.match.params.param_value
Ex: this.props.match.params.campus

Answer 2

您可以尝试如下所示：

<Route path="/course/:id/:CAMPUS_NAME" component={MyPage} />