使用React-Router路由OR路径

Question

我路由的页面保持相同的组件结构，但其内容基于URL略有变化。当这个区域设置了我的路我目前使用的结构如下：

<Route path="/:focusPath/read/agree" component={ViewerLayout} /> 
<Route path="/:focusPath/read/neutral" component={ViewerLayout} /> 
<Route path="/:focusPath/read/disagree" component={ViewerLayout} /> 
<Route path="/:focusPath/speak/agree" component={ViewerLayout} /> 
<Route path="/:focusPath/speak/neutral" component={ViewerLayout} /> 
<Route path="/:focusPath/speak/disagree" component={ViewerLayout} /> 

然而，这似乎重复和过于复杂。尽管它按原样工作，但是我可以通过重塑它来完成这样的事情吗？

<Route path={"/:focusPath"+("/read"||"/speak")+("/agree"||"/neutral"||"/disagree")} component={ViewerLayout} /> 

我意识到语法都是错误的，但也许是简化了它使它工作的6行的东西？

Answer 1

这不推荐，但它应该适用于您的用例。你可以传递一个正则表达式到path。这里有一个片段可以帮你找到正确的想法。

<Route path="/:focusPath/read/(/agree|neutral|disagree/)" component={ViewerLayout} /> 

我是垃圾在正则表达式，所以可能不会像现在这样工作，但你明白了。