How to implement multiple route with single container or layout in react-router-dom v6

user_13492734 0
Viewed 3428

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>

Sample Console warnings:

enter image description here

react-router-dom reactjs
2 Answers

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;

EDITED: Multiple routed with multiple layouts can be done by using <Outlet> component in layouts and <Route> component composition. <Routes> component is similar to react-router@5 Switch: docs.

Here's an example how to you can use multiple layouts with multiple routes:


    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>
        );
    };
user_32710160

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