Question

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

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

<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来访问此数据

还有，我是否可以通过props将path参数（即option1）传递到组件中？我该怎么办？

Answer 1

您可以存储array个路径并将它们map存储到相同的Component

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

是否可以通过道具将path参数（即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} />

Answer 2

参数设置为submitInfo() { this.http.post(url, data).toPromise() .then( (response: Response) => { console.log(response); } )); }，您可以使用/myroute:myparam在目标组件中检索它

使用选项反应路由器端点

2 个答案: