Question

React路由器为路由Foo

呈现FooBar和/foo/bar

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>

你也可以使用完全道具来确保仅当网址 / foo 而不是 / foo 路由> /富/酒吧：

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

React路由器忽略URL中的斜杠

1 个答案: