I want to know how can I implement multiple route with single container or layout in react-router-dom v6

Here is my code so far:

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

But it's not working, What Am I missing here?

Thanks!

Code Update:

<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>

CodePudding user response：

If you've "common" layout containers you want to share/render with multiple routes/routed components then it's common to have each layout render nested routes into an Outlet component.

Example:

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>

CodePudding user response：

There are several approaches you can choose with react-router@6.

The first option is to pass routes as children to a layout component.

    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;

The second option is to use <Outlet> component. There's an example from the react-router@6 docs.

    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;