How can i show nav bar on route.v6 only on a specific page?

Question

can i show nav bar on route.v6 only on a specific page? how to. . .

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/detail" element={<Detail />} />
        <Route path="/store" element={<Store />} />
        <Route path="/follow" element={<Follow />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/login" element={<Login />} />
      </Routes>
      <Nav />
    </BrowserRouter>
  );
};

score 4 · Answer 1 · answered Dec 22 '21 at 02:33

If you are interested in doing the OPPOSITE, that the navbar appears in all, but that in a sungle specific page the additional navbar component does not appear, it is like this:

First you need a Layout

import { Outlet } from "react-router-dom"
import Topbar from "./topbar/Topbar"
import Sidebar from "./sidebar/Sidebar"


export function Layout () {
    return (
        <div>
            <Topbar />
            <div className="container">
              <Sidebar />
              <Outlet />
            </div>
        </div>
    )
}

..... next component

App.js

import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import User from "./pages/user/User";
import Login from "./pages/login/Login";
import { Layout } from "./components/Layout";


const App = () => {
  return (
    <BrowserRouter>
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route index element={<Home />} />
              <Route exact path="/users" element={<UserList />} />
              <Route path="/user/:userId" element={<User />} />
              <Route path="/newUser" element={<NewUser />} />
            </Route>
              <Route path="/login" element={<Login />} />
          </Routes>
      </BrowserRouter>
  );
}

export default App;

(The /login component, is the component that navbar not appear)

Drew Reese · Answer 2 · 2021-12-03T05:37:00.060

Yes, you can. Render it with the component on the specific route you want it on.

Example:

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <>
              <Nav />
              <Main />
            </>
          }
        />
        <Route path="/detail" element={<Detail />} />
        <Route path="/store" element={<Store />} />
        <Route path="/follow" element={<Follow />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

You can create a layout/wrapper component as well to do a similar thing if you want it to be a bit more dynamic. Render the navbar and an outlet for nested route components to be rendered into.

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

const NavLayout = () => (
  <>
    <Nav />
    <Outlet /> // <-- nested routes render here
  </>
);

...

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<NavLayout />}>
          <Route index element={<Main />} />
        </Route>
        <Route path="/detail" element={<Detail />} />
        <Route path="/store" element={<Store />} />
        <Route path="/follow" element={<Follow />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

How can i show nav bar on route.v6 only on a specific page?

2 Answers2

Linked