我正在构建一个网站，我不想在 2 个页面中显示导航栏。其中一个是 404 页面，我将在其中提供一个重定向按钮。另一个是网站的登陆页面，我将在其中提供一个按钮，该按钮将重定向到网站的主页。这是我的 app.js 代码，我在其中定义了路线。import React from "react";import "./App.css";import { BrowserRouter as Router, Switch, Route } from "react-router-dom";import Navbar from "./Components/Navbar";import Home from "./Components/Pages/Home";import PlanYourTrip from "./Components/Pages/PlanYourTrip";import AboutUs from "./Components/Pages/AboutUs";import SafetyMeasures from "./Components/Pages/SafetyMeasures";import Travel from "./Components/Pages/Travel";import Error from "./Components/Pages/404";function App() { return ( <> <Router> <Navbar /> <Switch> <Route path="/" exact component={Travel} /> <Route path="/home" exact component={Home} /> <Route path="/plan-your-trip" exact component={PlanYourTrip} /> <Route path="/about-us" exact component={AboutUs} /> <Route path="/safety-measures" exact component={SafetyMeasures} /> <Route component={Error} /> </Switch> </Router> </> );}export default App;我想从<Route path="/" exact component={Travel} /> 和 中 删除导航栏<Route component={Error} />。请帮忙。
4 回答
Qyouu
TA贡献1786条经验 获得超11个赞
<Navbar />需要检查 window.location 并渲染为空
请参阅https://reactrouter.com/web/api/Hooks/uselocation
或者创建一个新组件来执行检查并将其呈现为子组件
<MayRenderNav><Navbar /></MayRenderNav>
慕田峪9158850
TA贡献1794条经验 获得超7个赞
要在 uke 答案上添加更多上下文，您可以使用导航栏中的 useLocation 钩子并执行以下操作
// All the routes you want to exclude
const withouSidebarRoutes = ["/about"];
function Navbar() {
const {pathname} = useLocation();
// Validates if the current pathname includes one the routes you want to hide the sidebar is present on the current url
// If that's true render null instead of the sidebar
if (withouSidebarRoutes.some((item) => pathname.includes(item))) return null;
return (
//your navbar code.
)
}
include 很有用，因为如果您有类似的嵌套路由，about/1它也会排除该路由，如果您只想排除 about 页面而不是嵌套页面，请使用简单的 equal 。
withouSidebarRoutes.some((item) => pathname === item)
检查 hooks api 参考以了解 useLocation 可以做什么： https: //reactrouter.com/web/api/Hooks/uselocation
另外，我还有一个工作沙箱，其中一个侧边栏会在您位于“关于”部分时隐藏起来。 https://codesandbox.io/s/cranky-lewin-p8ozv
holdtom
TA贡献1805条经验 获得超10个赞
您的代码的问题是<Navbar />组件将在不关心路由的情况下加载。
您可以简单地将<Navbar />组件放入您想要加载的组件中，然后留给其他组件。
aluckdog
TA贡献1847条经验 获得超7个赞
这可能感觉有点作弊，但它确实有效。
从主页隐藏导航栏（路径=“/”）非常简单。我们可以按照书本做，在“Route”中使用渲染。
棘手的部分是如何隐藏 404 错误页面，该页面与网站中的所有其他路由不匹配。
我使用的技巧是在错误页面挂载时调用 useEffect，将导航栏的样式更改为显示：无；
import React from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import "./styles.css";
const NavBar = () => {
return (
<div className="navbar">
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
<Link to="/error">Error</Link>
</div>
);
};
const Home = () => (
<div>
<h1>This is home</h1>
<ul>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
);
const About = () => <div>About</div>;
const Contact = () => <div>Contact</div>;
const Error = () => {
React.useEffect(() => {
document.getElementsByClassName("navbar")[0].style.display = "none";
}, []);
return (
<div>
<h1>Error</h1>
<Link to="/">Back to home</Link>
</div>
);
};
export default function App() {
return (
<Router>
<Route
render={({ location }) => {
if (location.pathname !== "/") return <NavBar />;
}}
/>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Error} />
</Switch>
</Router>
);
}
body {
margin: 0;
padding: 0;
}
.App {
font-family: sans-serif;
text-align: center;
}
.navbar {
background: black;
color: white;
padding: 10px 20px;
}
.navbar a {
display: inline-block;
padding: 6px 12px;
text-decoration: none;
color: white;
text-transform: uppercase;
}
添加回答
举报
0/150
提交
取消