Question

我的所有网站路由-march=CPU[+EXTENSION...]都有一个父组件，它包裹了我的所有路由，例如-mtune=CPU，<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>的路由时，它只会呈现这些组件？

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。

路由特定的react-router父组件

1 个答案: