如何为 Front 和 admin 页面创建多个嵌套路由答案

【问题标题】：How to create multiple nested routes for Front and admin pages如何为 Front 和 admin 页面创建多个嵌套路由
【发布时间】：2019-11-01 05:42:01
【问题描述】：

我在网站前端和管理部分的路由中遇到问题，我的代码如下所示：应用.js

 class App extends Component {
  render() {
    return (
      <>
        <BrowserRouter>
          <Router />
        </BrowserRouter>
      </>
    );
  }
}

Router.js

const Router = () => (
  <>
    <Switch>
      <Home>
        <Route
          component={({ match }) => (
            <div>
              <Route exact path="/" component={Main} />
              <Route exact path="/read" component={Read} />
              <Route exact path="/post" component={Posts} />
              <Route exact path="/user" component={Users} />
              <Route exact path="/signup" component={Signup} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/post/:id" component={Post} />
              <Route exact path="/forgot-password" component={ForgotPassword} />
            </div>
          )}
        />
      </Home>
      {/*Admin dashboard*/}
      <Dashboard>
        <Route
          component={({ match }) => (
            <div>
              <Route exact path="/admin" component={MainDashboard} />
              <Route exact path="/admin/post" component={PostManage} />
              <Route exact path="/admin/user" component={UserManage} />
            </div>
          )}
        />
      </Dashboard>
      <Route component={NoMatchPage} />
    </Switch>
  </>
);


export default Router;

仪表板.js

const Dashboard = props => {
  return (
    <div>
      <Sidebar />
      {props.children}
    </div>
  );
};
export default Dashboard;

我希望实现 Home 和 Dashboard 具有不同的路由。但是当我使用此代码时，它只能路由 Home 嵌套路由，即 /read，/post 工作正常。但是 /admin,/admin/post 没有出现。

【问题讨论】：

标签： reactjs react-router-v4 react-router-dom

【解决方案1】：

你已经把所有的路线都“精确”了，这给你带来了麻烦。你应该让父母只是“路径”。

例如：

从

中删除“精确”

<Route path="/admin" component={MainDashboard} />

您的嵌套管理路由将开始工作。

【讨论】：