React Router，在某些页面上隐藏导航和页脚。带路由器 V6

Answer 1

您可以在您的应用程序中使用模块化，将其分成不同的部分。这可以通过在每个应用程序中使用嵌套路由来最好地完成。例如，您可以让 example.com/routes/xxx 有一个布局，让 example.com/other/xxx 有另一种布局......您也可以使用它来选择性地呈现您提到的导航栏和页脚。

如果您的应用程序具有非常不同的功能/区域，需要使用不同的导航栏/页脚组合，那么对它进行分段是一个好主意。这是一个使用大部分代码的示例，它将其分割成主布局，而不是布局。

应用程序.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import PageWithoutHeaderOrFooter from "./Pages/NoHeaderOrFooter";
import MainLayoutRoutes from "./Layouts/MainLayoutRoutes";

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/noheaderorfooter" element={<PageWithoutHeaderOrFooter />} />
                <Route path="*" element={<MainLayoutRoutes />} />
            </Routes>
        </Router>
    );
}

export default App;

MainLayuotRoutes.js

import React from 'react';
import Home from ".//Pages/Home";
import Dashboard from "./Pages/Dashboard";
import Login from "./Pages/Login";
import Price from "./Pages/Price";
import ErrorPage from "./Pages/ErrorPage";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Profile from "./Pages/Profile";
function MainLayoutRoutes() {
    return (
        <React.Fragment />
            <nav>
                <Navbar />
            </nav>{/*This is outside the routes component on purpose read below*/}
            <Routes>
                <Route index element={<Home />} />
                <Route path="/Dashboard" element={<Dashboard />} />
                <Route path="/Login" element={<Login />} />
                <Route path="/Price" element={<Price />} />
                <Route path="/Profile/:username" element={<Profile />} />
                <Route path="/*" element={<ErrorPage />} />
            </Routes>
            <footer>
                <Footer />
            </footer>
        <React.Fragment />
    )
}

export default MainLayoutRoutes;

关于这段代码，我想注意几点。
首先，Routes 组件中的每个子组件都必须是 Route 组件（这不包括 Route 组件的元素部分）。这就是我使用React.Fragment 的原因（如果你不想渲染额外的div，你也可以很容易地使用<></>）。
其次，使用这种类型的路由有利于将您的应用程序划分为区域......使用区域不仅更适合路由，而且更适合 SEO（在适用的情况下，一些爬虫还不支持 JavaScript）。
最后我想提一下，如果在极少数情况下只有一页需要不同的导航栏或页脚，只需使用conditional rendering 来处理边缘情况。

Answer 2

嗨，您可以通过设置一个状态来做到这一点，只有当状态为真时，导航和页脚才会呈现：

function App() {

  const [showNav, setShowNav- = useState(true);

  return (
    <Router>
   {   showNav &&
          <nav>
            <Navbar />
          </nav>
   } 
      <Routes>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Login" element={<Login />} />
        <Route path="/Price" element={<Price />} />
        <Route path="/Profile/:username" element={<Profile />} />

        <Route path="/*" element={<ErrorPage />} />
      </Routes>

    {showNav &&
          <footer>
            <Footer />
          </footer>
        </Router>

    }
  );
}

例如，如果您不想在主页中显示导航，您将传递 setShowNav 函数作为道具并将其设置为 false：

<Route index element={<Home funcNav={setShowNav}/>} />

在主页中：

props.funcNav(false);

Answer 3

你也可以使用来自 react-router-dom 的UseLocation

const { pathname } = useLocation();
      <footer>
         {pathname !== '/<SOME_ROUTE>' &&
        <Footer />}
      </footer>

Answer 4

是的，您应该应用条件来检查当前位置是否显示导航 您应该使用 react-router 中的 useLocation 去做这个

Answer 5

这是来自官方documentation 的示例，您可以如何做到这一点。

使用路由组件：

<Routes>
  <Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path="teams" element={<Teams />}>
      <Route path=":teamId" element={<Team />} />
      <Route path=":teamId/edit" element={<EditTeam />} />
      <Route path="new" element={<NewTeamForm />} />
      <Route index element={<LeagueStandings />} />
    </Route>
  </Route>
  <Route element={<PageLayout />}>
    <Route path="/privacy" element={<Privacy />} />
    <Route path="/tos" element={<Tos />} />
  </Route>
  <Route path="contact-us" element={<Contact />} />
</Routes>

使用 useRoutes 钩子：

let routes = [
  {
    element: <App />,
    path: "/",
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "teams",
        element: <Teams />,
        children: [
          {
            index: true,
            element: <LeagueStandings />,
          },
          {
            path: ":teamId",
            element: <Team />,
          },
          {
            path: ":teamId/edit",
            element: <EditTeam />,
          },
          {
            path: "new",
            element: <NewTeamForm />,
          },
        ],
      },
    ],
  },
  {
    element: <PageLayout />,
    children: [
      {
        element: <Privacy />,
        path: "/privacy",
      },
      {
        element: <Tos />,
        path: "/tos",
      },
    ],
  },
  {
    element: <Contact />,
    path: "/contact-us",
  },
];