使用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} />

我在Regex的垃圾很可能不会按原样运作，但你明白了。