带有选项的反应路由器端点答案

【问题标题】：React Router Endpoint with Options带有选项的反应路由器端点
【发布时间】：2020-01-30 20:40:07
【问题描述】：

我正在尝试定义一个可以包含多个不同选项的反应路线。

我试图避免为每个人定义一条路线，如下所示：

<Route  path='/option1' component={Testing}/>
<Route  path='/option2' component={Testing}/>
<Route  path='/option3' component={Testing}/>

在 Express 中，我可以使用 app.get('/:name(option1|option2|option3)?', (req, res) => {} 执行此操作，然后通过 req.params.name 访问此数据

另外，有没有办法可以通过道具将路径参数（即选项 1）传递到我的组件中？我该怎么做？

【问题讨论】：

【解决方案1】：

您可以将路径的array 和map 存储到相同的Component

['/path','/foo','bar'].map(path => <Route key={path} path={path} component={Foo} />)

有没有办法可以通过 props 将路径参数（即 option1）传递到我的组件中？

是的，只需使用render 而不是component

<Route path='/' render={() => <MyComp myProp='foo'/>}

对于url parameters，像这样使用它

<Route path='/path/:param' component={Foo} />

在Foo.js里面

console.log(props.match.params.param)

你也可以使用regexp

<Route exact path="/path/:foo([0-9a-fA-f]{40})" component={Foo} />

【讨论】：

【解决方案2】：

参数设置为/myroute:myparam，您可以使用this.props.match.params.myparam在目标组件中检索它

【讨论】：