如何在react-router-dom v6中使用单个容器或布局实现多个路由

Question

我想知道如何在react-router-dom v6中使用单个容器或布局实现多个路由

到目前为止，这是我的代码：

<Routes>
<Route
        path="/dashboard"
        element={
          <AdminLayout>
            <DashboardScreen />
          </AdminLayout>
        }
      />
      <Route
        path="/guides"
        element={
          <AdminLayout>
            <GuidesScreen />
          </AdminLayout>
        }
      />
      <Route
        path="/post"
        element={
          <AdminLayout>
            <PostScreen />
          </AdminLayout>
        }
      />
</Routes>

但它不起作用，我在这里错过了什么？

谢谢！

代码更新：

<Routes>
    <LoginLayout>
      <Route path="/" element={<SignInForm />} />
      <Route path="/signin" element={<SignInForm />} />
      <Route path="/newpassword" element={<NewPassword />} />
      <Route path="/phoneverification" element={<PhoneVerification />} />
      <Route path="/continuewithphone" element={<ContWithPhone />} />
      <Route path="/resetpassword" element={<ResetPassword />} />
      <Route
        path="/confirm-resetpassword"
        element={<ConfirmResetPassword />}
      />
    </LoginLayout>
  </Routes>
  <Routes>
    <AdminLayout>
      //Routes here
    </AdminLayout>
  </Routes>

控制台警告示例：

Answer 1

您可以使用react-router@6选择多种方法。

第一个选项是将路由作为子级传递给布局组件。

    import React from 'react';
    import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
    
    const AdminLayout = ({ children }) => (
        <div>
            <nav>
                <NavLink to="/">Home</NavLink>
                <NavLink to="/dashboard">Dashboard</NavLink>
                <NavLink to="/guides">Guides</NavLink>
            </nav>
            <div>
                {children}
            </div>
        </div>
    );
    
    const Home = () => (<span>Home</span>);
    const Dashboard = () => (<span>Dashboard</span>);
    const Guides = () => (<span>Guides</span>);
    
    const App = () => {
        return (
            <BrowserRouter>
                <AdminLayout>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/guides" element={<Guides />} />
                    </Routes>
                </AdminLayout>
            </BrowserRouter>
        );
    };
            
    export default App;

第二种选择是使用<Outlet>组件。React-router@6 文档中有一个示例。

    import React from 'react';
    import { BrowserRouter, Routes, Route, NavLink, Outlet } from 'react-router-dom';
    
    const AdminLayout = () => (
        <div>
            <nav>
                <NavLink to="/">Home</NavLink>
                <NavLink to="/dashboard">Dashboard</NavLink>
                <NavLink to="/guides">Guides</NavLink>
            </nav>
            <div>
                <Outlet />
            </div>
        </div>
    );
    
    const Home = () => (<span>Home</span>);
    const Dashboard = () => (<span>Dashboard</span>);
    const Guides = () => (<span>Guides</span>);
    
    const App = () => {
        return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<AdminLayout />}>
                        <Route index element={<Home />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/guides" element={<Guides />} />
                    </Route>
                </Routes>
            </BrowserRouter>
        );
    };
            
    export default App;

编辑：<Outlet>可以通过在布局和组件组合中 使用组件来完成具有多个布局的多个路由<Route>。 <Routes>组件类似于react-router@5 Switch：docs。

以下是如何使用具有多条路线的多种布局的示例：

    const AdminLayout = () => (
        <div>
            <h1>Admin Lyout</h1>
            <Outlet />
        </div>
    );
    
    const LoginLayout = () => (
        <div>
            <h1>Login Layout</h1>
            <Outlet />
        </div>
    );
    
    const Home = () => (<span>Home</span>);
    const Dashboard = () => (<span>Dashboard</span>);
    const SignInForm = () => (<span>SignInForm</span>);
    const NewPassword  = () => (<span>NewPassword </span>);
    
    const App = () => {
        return (
            <BrowserRouter>
                <nav>
                    <NavLink to="/">Home</NavLink>
                    <NavLink to="/dashboard">Dashboard</NavLink>
                    <NavLink to="/login">SignInForm</NavLink>
                    <NavLink to="/new-password">NewPassword</NavLink>
                </nav>
                <Routes>
                    <Route element={<LoginLayout />}>
                        <Route path="/login" element={<SignInForm />} />
                        <Route path="/new-password" element={<NewPassword />} />
                    </Route>
                    <Route element={<AdminLayout />}>
                        <Route index element={<Home />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                    </Route>
                </Routes>
            </BrowserRouter>
        );
    };

Answer 2

如果您想要与多个路由/路由组件共享/渲染“通用”布局容器，那么通常让每个布局将嵌套路由渲染到组件中Outlet。

例子：

import { Outlet } from 'react-router-dom';

const LoginLayout = () => (
  <div /* layout props & styling */ >
    {/* local layout UI */}
    <Outlet /> // <-- nested routes rendered here
  </div>
);

const AdminLayout = () => (
  <div /* layout props & styling */ >
    {/* local layout UI */}
    <Outlet />
  </div>
);

...

<Routes>
  <Route element={<LoginLayout />}>
    <Route path="/" element={<SignInForm />} />
    <Route path="/signin" element={<SignInForm />} />
    <Route path="/newpassword" element={<NewPassword />} />
    <Route path="/phoneverification" element={<PhoneVerification />} />
    <Route path="/continuewithphone" element={<ContWithPhone />} />
    <Route path="/resetpassword" element={<ResetPassword />} />
    <Route
      path="/confirm-resetpassword"
      element={<ConfirmResetPassword />}
    />
  </Route>
  <Route element={<AdminLayout />}>
    // Routes here
  </Route>
</Routes>