How to go specific route without rendering some components in React?

Question

I am using react-router-dom v6. I want my Login page to be rendered without the Sidebar and Topbar components. How to do it?

function App() {
  return (
    <Router>
      <Container>
        <Sidebar />
        <Content>
          <Topbar />
          <MainContent>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/users" element={<UserList />} />
              <Route path="/users/:id" element={<User />} />
              <Route path="/newUser" element={<NewUser />} />
              <Route path="/products" element={<ProductList />} />
              <Route path="/products/:id" element={<Product />} />
              <Route path="/newProduct" element={<NewProduct />} />
              <Route path="/login" element={<Login />} />
            </Routes>
          </MainContent>
        </Content>
      </Container>
    </Router>
  );
}

I don't want my login page to render inside the MainContent but taking the whole page without Sidebar and Topbar.

I tried moving the Routes upper and have the login route above the sidebar but there is an error Error: [Sidebar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

It's probably better to create your own custom route components that handle the rendering of things like layout components and sidebars/navbars. Create your own `Route` component that just renders container stuff wrapping the react-router route, then something like an `AuthRoute` component for the routes they can see when they've logged in, that renders the container stuff and also the sidebar/navbar/whatever. Then you can just have `} />` where that Route is your custom one, and `} />` which is ur custom one — Jayce444, Nov 24 '21 at 01:45

score 1 · Answer 1 · answered Apr 11 '22 at 15:01

function App() {
    return (
        <Router>
            <Container>
                {
                    Login || <Sidebar />
                }

                <Content>
                    {
                        Login || <Topbar />
                    }
                    <MainContent>
                        <Routes>
                            <Route path="/" element={<Home />} />
                            <Route path="/users" element={<UserList />} />
                            <Route path="/users/:id" element={<User />} />
                            <Route path="/newUser" element={<NewUser />} />
                            <Route path="/products" element={<ProductList />} />
                            <Route path="/products/:id" element={<Product />} />
                            <Route path="/newProduct" element={<NewProduct />} />
                            <Route path="/login" element={<Login />} />
                        </Routes>
                    </MainContent>
                </Content>
            </Container>
        </Router>
    );
}

try conditional rendering. It works for me!

score 0 · Accepted Answer · answered Nov 24 '21 at 01:47

Since SideBar and TopBar appear to be part of a "layout", and you want a different "layout" specifically for "/login" then I suggest abstracting the container components into layout components. Each layout container should render an Outlet for their respective nested routes.

const AppLayout = () => (
  <Container>
    <Sidebar />
    <Content>
      <Topbar />
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

const LoginLayout = () => (
  <Container>
    <Content>
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<UserList />} />
          <Route path="users/:id" element={<User />} />
          <Route path="newUser" element={<NewUser />} />
          <Route path="products" element={<ProductList />} />
          <Route path="products/:id" element={<Product />} />
          <Route path="newProduct" element={<NewProduct />} />
        </Route>
        <Route path="/login" element={<LoginLayout />}>
          <Route index element={<Login />} />
        </Route>
      </Routes>
    </Router>
  );
}

How to go specific route without rendering some components in React?

2 Answers2