使用 React 路由器 v4 指定可选路径名

【问题标题】：Specify an optional pathname with React router v4使用 React 路由器 v4 指定可选路径名
【发布时间】：2017-11-16 18:19:18
【问题描述】：

所以我在 index.js 中为 React FE 声明了这条路线：

<Route exact path='/documents/:survey_id' component={protectedRoute(Documents)} />

即使路由是/documents，我也想返回相同的组件。在这种情况下，组件只会使用用户列表中的第一个 :survey_id 呈现。我想我可以添加另一条路线，例如：

<Route exact path='/documents/:survey_id' component={protectedRoute(Documents)} />
<Route exact path='/documents' component={protectedRoute(Documents)} />

有点重复所以想知道是否有更好的方法。

【问题讨论】：

标签： reactjs react-router-v4 react-router-dom

【解决方案1】：

您可以做的是在您的 Route 路径中添加一个可选路径，而不是额外的 Route，例如

<Route exact path='/documents(/:survey_id)?' component={protectedRoute(Documents)} />

注意： React 路径参数的提供方式 path-to-regexp 明白。所以定义一个参数为可选，您可以添加一个尾随问号 ?。

【讨论】：

使用npm 下载，使用import 'path-to-regexp'，并按照建议附上URL 的最后部分。它可以很好地渲染/documents，但是当提供/:survey_id 时，它不会渲染路线。我会继续深入研究。
它对你有用还是你仍然面临困难
刚刚回到项目的这一部分，现在我确实需要对其进行整理。仍然有我评论中描述的问题，但正在调查它。