reactjs - React 路由器忽略 URL 中的斜杠

Question

React 路由器为路由 /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 路由仅在网址为 /foo 而不是 /foo 时匹配>/foo/bar:

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