javascript - 路由特定的react-router父组件

Question

我的所有网站路由都有一个父组件 <App>环绕我的所有路线，例如 / , /about等。它看起来像:

<BrowserRouter>
    <App>
      <Route exact path="/" component={Index} />
      <Route path="/post/:id" component={Post} />
    </App>
</BrowserRouter>

我还有一个由管理员使用的后端管理界面，我希望有一个不同的父组件。最后，它看起来像:

<BrowserRouter>
  <Admin>
    <Route exact path="/admin" component={AdminIndex} />
    <Route path="/admin/posts" component={AdminPosts} />
  </Admin>
</BrowserRouter>

但我无法让这个工作。首先，我尝试将两个路由器规则都放在 BrowserRouter 中。包裹在 div但这最终渲染了 <App>和<Admin>成分。我怎样才能将它们分开，以便当路由器匹配 <App> 的路由时，当它与 <Admin> 的路由匹配时，它会呈现该内容。它只渲染那些组件？

Answer 1

<BrowserRouter>
  <Switch>
    <Route path="/admin" component={Admin}/>
    <Route path="/" component={App}/>
  </Switch>
</BrowserRouter>

const App = (props) => (
  <div>
    <Route path="/post/:id" component={Post}/>
    <Route exact path="/" component={AdminIndex}/>
  </div>
);

const Admin = (props) => (
  <div>
    <Route path="/admin/posts" component={AdminPosts}/>
    <Route exact path="/admin" component={AdminIndex}/>
  </div>
);

如果“/admin”路由匹配，则 Admin组件将被专门渲染，进而渲染任何 Route匹配(App 组件也是如此)。了解更多examples .