在ReactJS中显示除主页以外的所有页面的标题

Question

我是ReactJS的新手，我希望除了主页之外的所有页面都显示标题<路由路径="/"元素=｛｝/>。

function App() {
return (
<div className="App">
<Router>
<Header/>
<Routes>
<Route path='/' element={ <Home/>}/>
<Route path='/Breakfast' element={<Breakfast/>}/>
<Route path='/Lunch' element={<Lunch/>}/>
<Route path='/Snacks' element={<Snacks/>}/>
<Route path='/Dinner' element={<Dinner/>}/>
<Route path='/Drinks' element={<Drinks/>}/>
<Route path='/NightLife' element={<NightLife/>}/>
</Routes>
<Footer/>
</Router>
</div>
);
}

Answer 1

如果当前页面不是主页，则可以将整个页面包装在Layout中，并仅呈现Header。

function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="/blogs" element={<Blogs />} />
</Routes>
</Router>
</div>
);
}

并提供这样的布局：

const Layout = () => {
return (
<>
{!(path="/") && <Header />}
<Outlet />
<Footer />
</>
)
};

W3Schools有一个很好的文档！

Answer 2

一种选择可能是将<Header />组件移动到<Layout />组件中(这是我通常会做的事情(。原因是您不能在<Router />上下文之外有条件地检查路由，这意味着您不能在您的<App />组件中进行检查。

布局将采用children道具，并检查当前路线是否为主页：

const Layout = ({ children }) => {
const { pathname } = useLocation();
return (
<div>
{pathname !== "/" ? <Header /> : null}
<div>{children}</div>
</div>
);
};

看看这里的例子。