如何仅在特定页面上显示 route.v6 上的导航栏？

Posted 2023-02-22

【中文标题】如何仅在特定页面上显示 route.v6 上的导航栏？

【英文标题】：How can i show nav bar on route.v6 only on a specific page?

【发布时间】：2022-01-09 13:29:09

【问题描述】：

我可以仅在特定页面上显示 route.v6 上的导航栏吗？ 如何。 . .

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

【参考方案1】：

是的，你可以。使用您想要的特定路线上的组件渲染它。

例子：

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

如果您希望它更具动态性，您也可以创建一个布局/包装器组件来执行类似的操作。渲染导航栏和嵌套路由组件的出口。

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

【讨论】：

@양성호 欢迎。如果您不知道或忘记了，以下是someone answers 时的操作。欢迎来到 ***，干杯，祝你好运！

【参考方案2】：

如果你有兴趣做 OPPOSITE，导航栏全部出现，但在单个特定页面中没有出现附加导航栏组件，是这样的：

首先你需要一个布局

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>
    )

..... 下一个组件

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;

（/login 组件，是导航栏不出现的组件）