我的路由器中有一个全局 header 组件。但是我想在登录页面隐藏。
我试过像这样使用 window.location 解决方案。它有效但在登录页面导航到主页后不起作用。 (在我刷新页面之前它不会显示标题)
App.js
import React, { useState, useEffect } from "react";
import "./sass/app.scss";
import { db, auth } from "./configs/firebase-config";
import { MainContext } from "./hooks/Context";
import { eventbriteRoutes } from "./configs/routes";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./components/Home/Header";
function App() {
const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
const data = {
isAuth,
setIsAuth,
};
return (
<>
<MainContext.Provider value={data}>
<Router>
{window.location.pathname !== "/login" ? <Header /> : null}{" "}
<Routes>
{eventbriteRoutes.map((RouteItem, index) => (
<Route
exact
key={index}
path={RouteItem.path}
element={RouteItem.element}
/>
))}
</Routes>
</Router>
</MainContext.Provider>
</>
);
}
export default App;
最佳答案
创建一个布局路由,它呈现(有条件地)Header
组件和嵌套路由组件的 Outlet
组件。
例子:
import { Outlet, useLocation } from 'react-router-dom';
const Layout = ({ hideHeaderPaths = [] }) => {
const { pathname } = useLocation();
return (
<>
{!hideHeaderPaths.includes(pathname) && <Header />}
<Outlet />
</>
);
}
...
function App() {
const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
const data = {
isAuth,
setIsAuth,
};
return (
<>
<MainContext.Provider value={data}>
<Router>
<Routes>
<Route element={<Layout hideHeaderPaths={["/login"]} />}>
{eventbriteRoutes.map((RouteItem) => (
<Route
key={RouteItem.path}
path={RouteItem.path}
element={RouteItem.element}
/>
))}
</Route>
</Routes>
</Router>
</MainContext.Provider>
</>
);
}
或者,如果只分离 "/login"
路由更容易,您可以创建一个无条件呈现 Header
组件的布局路由,并单独呈现登录路由。
例子:
import { Outlet } from 'react-router-dom';
const HeaderLayout = () => (
<>
<Header />
<Outlet />
</>
);
...
function App() {
const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
const data = {
isAuth,
setIsAuth,
};
return (
<>
<MainContext.Provider value={data}>
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<HeaderLayout} />}>
{eventbriteRoutes.map((RouteItem) => (
<Route
key={RouteItem.path}
path={RouteItem.path}
element={RouteItem.element}
/>
))}
</Route>
</Routes>
</Router>
</MainContext.Provider>
</>
);
}
关于reactjs - 如何在登录页面中隐藏标题组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71549309/