React隐藏特定页面中的菜单和页脚

Question

我将制作一个员工面板，我不想在员工面板上看到导航和页脚。如何在特定页面中隐藏这些组件?

这是我的app.js文件

<Router>
<div className="App">
<Menu />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/candidates" component={Candidates} />
<Route path="/employers" component={Employers} />
<Route path="/jobadverts" component={JobAdverts} />
<Route path="/jobadvert/detail/:id" component={JobAdvertDetails} />
<Route path="/cv/:id" component={Cv} />
<Route path="/signin" component={SignIn} />
<Route path="/signup" component={SignUp} />
<Route path="/postjobadvert" component={JobAdvertPost} />
<Route path="/panel/employee" component={EmployeePanel} />
<Route component={NoMatch} />
</Switch>
<Footer />
</div>
</Router>

Answer 1

使用useLocation，您可以在应用程序中的任何地方访问当前渲染路径:

const location=useLocation()

现在检查是否在panel/employee

const isEmployeePanelRendering = location.pathname==="/panel/employee"

最后，根据path: 有条件地呈现页脚和导航把它放在文件的第一行。

import {BrowserRouter as Router,Switch,useLocation,Route} from "react-router-dom";  

把useLocation和isEmployeePanelRendering放在App的开头

const App=()=>{

const location=useLocation()
const isEmployeePanelRendering = location.pathname==="/panel/employee"

最后返回部分:

return   <Router>
<div className="App">
{!isEmployeePanelRendering && <Menu />}
<Switch>
<Route exact path="/" component={Home} />
<Route path="/candidates" component={Candidates} />
<Route path="/employers" component={Employers} />
<Route path="/jobadverts" component={JobAdverts} />
<Route path="/jobadvert/detail/:id" component={JobAdvertDetails} />
<Route path="/cv/:id" component={Cv} />
<Route path="/signin" component={SignIn} />
<Route path="/signup" component={SignUp} />
<Route path="/postjobadvert" component={JobAdvertPost} />
<Route path="/panel/employee" component={EmployeePanel} />
<Route component={NoMatch} />
</Switch>
{!isEmployeePanelRendering && <Footer />}
</div>
</Router>

Answer 2

你可以创建一个RouteWrapper，并为它提供一个你选择的布局(例如:AdminLayout, EmployeeLayout等)

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { render } from 'react-dom';
import { One, Two, Three, Four } from './Components';
import { LayoutOne, LayoutTwo } from './Layouts';
function App() {
return (
<BrowserRouter>
<h3>Content of main App component</h3>
<ul>
<li><Link to="/one">One</Link></li>
<li><Link to="/two">Two</Link></li>
<li><Link to="/three">Three</Link></li>
<li><Link to="/four">Four</Link></li>
</ul>
<Switch>
<RouteWrapper path="/one" component={One} layout={LayoutOne} />
<RouteWrapper path="/two" component={Two} layout={LayoutOne} />
<RouteWrapper path="/three" component={Three} layout={LayoutTwo} />
<RouteWrapper path="/four" component={Four} layout={LayoutTwo} />
</Switch>
</BrowserRouter>
);
}
function RouteWrapper({
component: Component, 
layout: Layout, 
...rest
}) {
return (
<Route {...rest} render={(props) =>
<Layout {...props}>
<Component {...props} />
</Layout>
} />
);
}
render(<App />, document.getElementById('root'));

灵感来自https://javascript.plainenglish.io/simple-guide-for-layouts-in-react-router-e32b26c12cee