How to show login page without the layout?

user_10806531 0
Viewed 187

I'm tryign to learn reactjs and I followed the W3schools and used that to create the layout: https://www.w3schools.com/react/react_router.asp

My layout is bascially from Bootstrap 5 Dashboard example i.e: https://getbootstrap.com/docs/5.2/examples/dashboard/

All is working fine. Now I tried to add the Bootstrap 5 Login example, which is showing when I goto /login but its also showing the dashboard. How can I make it so that when going to login it doesn't shows the dashboard and only login page is displayed ?

Please note that I have used 100% above example and the dashbaord layout is in Layout.js file, as per W3schools reactjs nav/header/footer, its loading the layout and then showing other pages in it accordingly.

I'm not able to display the login page without the dashboard layout. Its loading it also.

This is my code of index.js

    import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

// For Normal Users Only
import Layout from "./pages/User/Layout";
import Home from "./pages/User/Home";
import Orders from "./pages/User/Orders";
import Categories from "./pages/User/Categories";
import Products from "./pages/User/Products";
import Customers from "./pages/User/Customers";
import Settings from "./pages/User/Settings";

// Common for All Users
import Login from "./pages/Login";
import Logout from "./pages/Logout";

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path="orders" element={<Orders />} />
                    <Route path="categories" element={<Categories />} />
                    <Route path="products" element={<Products />} />
                    <Route path="customers" element={<Customers />} />
                    <Route path="settings" element={<Settings />} />
                    <Route path="login" element={<Login />} />
                    <Route path="logout" element={<Logout />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Any help is appericiated.

Thanks in advance.

reactjs
2 Answers

Please define login router out of / route.

Like this.

import Layout from "./pages/User/Layout";
import Home from "./pages/User/Home";
import Orders from "./pages/User/Orders";
import Categories from "./pages/User/Categories";
import Products from "./pages/User/Products";
import Customers from "./pages/User/Customers";
import Settings from "./pages/User/Settings";

// Common for All Users
import Login from "./pages/Login";
import Logout from "./pages/Logout";

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="login" element={<Login />} />
                <Route path="/" element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path="orders" element={<Orders />} />
                    <Route path="categories" element={<Categories />} />
                    <Route path="products" element={<Products />} />
                    <Route path="customers" element={<Customers />} />
                    <Route path="settings" element={<Settings />} />
                    <Route path="logout" element={<Logout />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);```
user_155795730

Probably you need to check the <switch> component, that wraps your routes rendering a single route exclusively. Check the documentation for more details.

Also, which is the point of having a route to / and then a bunch of sub-routes? Isn't it simpler to just have the routes as /orders, /categories...

user_62762410
Related