Question

有人知道如何在反应路由器4中进行嵌套路由吗？我想设置这样的路线：

import React from 'react';
import { Route, Switch } from 'react-router';

import Containers from './containers/index';
import Components from './components/index';

export default (
    <Switch>
      <Route path='/users' component={Containers.Users} />
      <Route path='/users/:id' component={Containers.User} />
    </Switch>
)

但是/tickets/:id继续默认为Containers.Users呈现的组件 - 而不是来自Containers.User的组件。我使用react-router 3进行了一切非常简单的设置，但似乎发生了很多变化：

<Route path="/users" component={Containers.Users}>
  <Route path="/users/:id" component={Containers.User}/>
</Route >

是否有人知道针对react-router 4的上述非常简单的嵌套路由模式的最新设置？

Answer 1

现在在v4中，你应该在父组件中添加路由，不再有嵌套路由。

    <Redirect from="/courses/" to="/courses/html" />
    <Switch>
        <Route path="/courses/html" component={HTML} />
        <Route path="/courses/css" component={CSS} />
        <Route path="/courses/javascript" component={JavaScript} />
    </Switch>

在此处找到https://teamtreehouse.com/community/warning-you-should-not-use-route-component-and-route-children-in-the-same-route-route-children-will-be-ignored

Answer 2

我今天早些时候遇到了与React Router v4相同的问题，这解决了我的问题

<Route exact path="/users" component={Containers.Users/>
<Route path="/users/:id" component={Containers.Users />

在这种情况下，/users是路由的基本路径，/users/:id是子路径，因此您需要为父路径指定确切的路径。

如何使用react router 4进行嵌套路由？

2 个答案: