使用私有和公共嵌套组件对路由器单个组件进行反应

时间:2021-06-02 16:02:26

标签: javascript reactjs react-router-dom

我使用的是 react-router v5
我的jsx:

<Home>
    { auth.user && <Sidebar /> }
    <Main />
</Home>

我有以下两条路线:

"\" => public route 
"\folder\:topicId" => private route

我在 <Sidebar /> 组件中添加了这些路由。
根据这些路线,我想更新 <Main /> 组件。

最初,我在 <App /> 中有一个顶级开关用于此目的:

<Switch>
  <Route exact path="/">
    <Home/> // displays public content inside <Main />
  </Route>
  <PrivateRoute path="/folder">
    <Home/> // display private content inside <Main /> depending on topic
  </PrivateRoute>
</Switch>

但这会导致在从 <Home/> 导航到 "/" 时重新渲染整个 "/folder/:topicId",反之亦然。

所以,我想在 <Home /> 内添加 switch,但是我怎样才能使 "/folder" 成为私有路由?

如何在这些路由之间切换,同时只更新 <Main /> 组件?

0 个答案:

没有答案