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

Question

因此，我花了一段时间尝试隐藏网站某些页面中的导航和页脚组件，但遗憾的是没有运气。我在 Stackoverflow 上尝试了多种解决方案，其中只有一种通过创建一个新的布局组件然后将其放入路由中来部分工作，然后从登录页面中排除页脚和导航。但问题是它有效，但在主页上它只显示页脚和导航，中间没有像我在主页中所做的设计那样。

对我有用的唯一解决方案是创建 和 就像我在示例中所做的那样，但是我无法排除某些页面并将它们隐藏在那里......

这是它目前的样子，但不起作用：

import React from "react";
import Home from ".//Pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
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 App() {
  return (
    <Router>
      <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>

      <footer>
        <Footer />
      </footer>
    </Router>
  );
}

export default App;

Answer 1

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

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函数作为 prop 传递并将其设置为 false：

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

在主页中：

props.funcNav(false);