使用 React router v4 指定可选路径名

Question

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

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

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

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

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

Answer 1

你可以做的是在你的路线路径中有一个可选路径，而不是有一个额外的路线，比如

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

NOTE: React path parameters are provided in a way which path-to-regexp understands. So to define a parameter as optional you add a trailing question-mark ?.

使用 React router v4 指定可选路径名

Specify an optional pathname with React router v4

reactjs

react-router-v4

react-router-dom