Question

我有一个按预期工作的路由文件：

<Route path="/app" render={({match}) => (
    <Switch>
        <Route exact path={`${match.url}/`} component={Home} />
        <Route path={`${match.url}/error`} component={Error} />
    </Switch>
</Route>

但是当我尝试对路线进行硬编码时，它不起作用。例如：

<Route path="/app" render={({match}) => (
    <Switch>
        <Route exact path={`app/`} component={Home} />
        <Route path={`app/error`} component={Error} />
    </Switch>
</Route>

当然硬编码并不是我真正想要的，但如果我想做这样的事情

<Route path="/app">
    <Switch>
        <Route exact path="app/" component={Home} />
        <Route path="app/error" component={Error} />
    </Switch>
</Route>

使用Children的{{1}}创建应用，而不是Route道具。我做错了什么，或者我怎么能做到这一点？

Answer 1

React路由器V4不使用嵌套路由。

<Route path="/app">会匹配以/app开头的所有内容，我认为这不是你想要的。

这应该足以做你想做的事了：

<Switch>
  <Route exact path={`/app/error`} component={Error} />
  <Route path={`/app`} component={Home} />
</Switch>

为什么我的路线与React Router 4不匹配？

1 个答案: