React 路由器忽略 URL 中的斜杠

Question

React router 为路由 /foo/bar

渲染 Foo 和 FooBar

ReactDOM.render(
(<BrowserRouter> 
        <div>
                <Route path="/foo/bar" component={FooBar}/>
                <Route path="/foo" component={Foo}/>
        </div>
</BrowserRouter>)
, document.getElementById("root"));

到底为什么要运行两条路线？我认为这太疯狂了。

我将如何使用嵌套路由（没有 :/params 以防我想执行多个嵌套路由？例如 /foo/bar/baz/whatever？）。

如果不提及我使用的是哪个版本，这个问题的答案是否有意义？

Answer 1

使用 React Router V4，您可以使用 Switch 组件来确保只渲染第一个匹配的路由：

import { Switch, Route } from 'react-router-dom'

...

<Switch>
  <Route path="/foo/bar" component={FooBar}/>
  <Route path="/foo" component={Foo}/>
</Switch>

您还可以使用 exact 属性来确保 /foo 路由仅在 url 为 /foo 而不是 /foo/bar:

<Route path="/foo" exact component={Foo}/>
<Route path="/foo/bar" component={FooBar}/>

React 路由器忽略 URL 中的斜杠

React router ignoring slash in URL

routes

reactjs

react-router

react-router-dom