Question

我正在创建一个“仪表板”页面，如果路由路径是/ dashboard，我总是想在其中显示一个补充工具栏组件。但是我也希望/ dashboard也渲染另一个组件。

我要实现的目标：

路径： /仪表板应呈现Sidebar.js + Overview.js组件。
路由路径： / dashboard / account 应该呈现Sidebar.js + Account.js组件。
路线： /仪表板/收藏夹应呈现Sidebar.js + Favorites.js组件。
依此类推...

有人可以指出正确的方向如何实现这一目标吗？不能绕开我的头...

请参阅下文，以更加了解我的需求：

这是我到目前为止尝试过的：

              <Route path="/" exact component={Home} />
              <Route path="/podcast/:podId/:podName" component={Podcast} />
              <Route exact path="/categori/:categoryName" component={Category} />
              <AuthRoute path="/login" component={Login} />
              <AuthRoute path="/signup" component={Signup} />
            </Switch>
            <Route
              path="/dashboard"
              render={({ match: { url } }) => (
                <>
                  <Route path={`${url}/`} component={Sidebar} />
                  <Route path={`${url}/`} component={Overview} />
                  <Route path={`${url}/favorites`} component={Favorites} />
                </>
              )}
            />```

Answer 1

你应该去作曲。创建将组件放在一起的页面组件，然后将页面添加到路由器。

例如FavoritePage.js将是

<div>
  <Sidebar />
  <Favorites>
</div>

其他页面也一样

然后您将在Router中拥有

<Route path={`${url}/`} component={OverviewPage} />
<Route path={`${url}/favorites`} component={FavoritesPage} />

或者，如果您希望边栏是静态的。请参阅https://reacttraining.com/react-router/web/guides/quick-start

   <Router>
      <div>
        <Sidebar />
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/overview">
            <Overview />
          </Route>
          <Route path="/overview">
            <Favorites />
          </Route>
          <Route path="/">
            <Overview />
          </Route>
        </Switch>
      </div>
    </Router>

如何使用React-router

1 个答案: