React hide menu and footer in a specific page-CodePudding

I will make an employee panel, I do not want to see nav and footer at employee panel. How can I hide those components in a specific page?

Here is my app.js file

<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>

CodePudding user response：

You could create a RouteWrapper and supply it with a layout of your choice (ie: AdminLayout, EmployeeLayout, etc.)

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'));

Inspired from https://javascript.plainenglish.io/simple-guide-for-layouts-in-react-router-e32b26c12cee

CodePudding user response：

With useLocation, you have access to current rendering path anywhere in your app:

const location=useLocation()

Now check if is in panel/employee

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

Finally, conditionally rendering Footer and Nav based on path:

put this in the first line of the file.

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

Put useLocation and isEmployeePanelRendering in the beginning of App

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

Finally the return part:

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>