Question

我正在编造一个没有 n和 side的标志页。我已经走过几页,提出了类似的问题,但似乎没有涉及我目前的情况。

How to hide navbar in login page in react router the example given is great but I believe the way of accomplishing that same task has changed with react-router-dom v6 leading me to read about this change in https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5

It seems I am not understanding a certain aspect about routing with React Router. In the code below I have two Routes. One of the routes(Login) I would like to have render without the NavBar and SideBar component.

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

我也尝试过的一个替代办法是,将纳巴和巴拉边的帽子移至达什板的构成部分,但我基本上不得不为任何新的构成部分提供同样的复制和复制。这种方法是错误的,效率不高,但如果这是正确的方式,我将做必要的工作。

Edit: I think it s important to include what it currently does is load the Login page with the NavBar and SideBar included. Navigating to the dashboard component has the NavBar and SideBar but this is intended. What I would like is for the Login page not to have the NavBar and SideBar

Answer 1

If I understand your question, you are wanting to render the nav and sidebar on the non-login route. For this you can create a layout component that renders them and an outlet for the nested routes.

Using nested routes

import { Outlet } from  react-router-dom ;

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};

Using a routes configuration and `useRoutes` hook

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

......

import { useRoutes } from  react-router-dom ;

const App = () => {
  const routes = useRoutes(routesConfig);

  return routes;
};

Using a routes configuration and data routers (introduced in v6.4.0)

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

......

import { createBrowserRouter, RouterProvider } from  react-router-dom ;

const router = createBrowserRouter(routesConfig);

const App = () => {
  return <RouterProvider router={router} />;
};

Answer 2

The easiest way for you to hide the navbar would be to go to the login page component and call useLocation(). Then you woulf do something like this after declaring the use location. And assigning it to a variable location { location.pathname === "/login" ? null : (

a. 整块 n;

Not sute if you can be able to read as I type from my phone

Using nested routes

Using a routes configuration and useRoutes hook

Using a routes configuration and data routers (introduced in v6.4.0)

友情链接

Using a routes configuration and `useRoutes` hook