javascript - 按类型排除 React Router 中路径参数的值

标签 javascript reactjs react-router coercion

我对路由组件有点困惑。想象一下,我有这两条路线,它们有自己的路径:

<Route path='/person/add' exact component={PersonForm}/>
<Route path='/person/:id' exact component={PersonView}/>

/person/add 应该显示一个表单,我可以在其中创建一个新的 Person
/person/:id 应该显示一个具有给定 ID 的人。

问题 >> 如果我导航到 /person/add 它也会显示 /person/:id 的组件,因为字符串“add”对":id".

有什么办法可以避免这种情况吗?例如告诉 :id 应该是一个数字?

最佳答案

找到一个可能的解决方案:您可以在路线周围使用Switch。然后它将只匹配第一个匹配的。

<Switch>
  <Route path='/person/add' exact component={PersonForm}/>
  <Route path='/person/:id' exact component={PersonView}/>
</Switch>

关于javascript - 按类型排除 React Router 中路径参数的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47705126/

相关文章:

reactjs - React js this.props.variable 在子组件中未定义

react-router - 触发转换以执行 replaceState 而不是 pushState

reactjs - React-router:更改 URL 并清除历史记录

javascript - 向tinyMCE添加自定义下拉菜单并插入动态内容

javascript - 关闭 kendo ui 移动 View

javascript - 防止点击时代码镜像复制

javascript - 扩展默认值,选项覆盖所有内容

javascript - 在链式调用中使用函数参数 - javascript

javascript - React material-ui withStyles 对外部文件不起作用

reactjs - 在 Navlink 上处于事件状态时渲染不同的组件