时间戳

首页 > 解决方案 > 如何使用反应制作嵌套路由？

javascript - 如何使用反应制作嵌套路由？

问题描述

我正在学习 React，我正在尝试访问该 url localhost:3000/users/add，但我没有成功。

结构：

| index.js
| components/
|     App.js
|     Users/
|       Add.js
|       View.js
|       index.js

应用程序.js：

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/users" component={IndexUser} /> // import IndexUser from './Users/index.js'
          </Switch>
        </Router>
      </div>
    );
  }

}

现在在User/index.js我写相同的路由逻辑，

export default class IndexUsuario extends Component {
    render() {
        return (
            <div>
                <Router>
                    <div class="top-title">
                        <a href="/users"> User Section</a>
                        <a href="/users/add"> Create new User</a>
                    </div>
                    <Switch>
                        <Route exact path="/users/viewusers" component={ViewUser} /> //import ViewUser from './View.js'
                        <Route path="/users/add" component={AddUser} /> //import AddUser from './Add.js'
                    </Switch>
                </Router>
            </div>
        );
    }
}

但是尝试访问users/add它没有用。任何人都可以在我失踪的地方帮助我吗？

标签： javascriptreactjs

解决方案

你不需要一秒钟<Router>来嵌套路由。您可以像这样在彼此内部嵌套路由：

<Router>
  <Route path="/users" component={UsersRoot}>
    <Route path="/add component={AddUser} />
  </Route>
</Router>

渲染时，AddUser组件会UsersRoot在childrenprop中传递给。

推荐阅读