1

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>
nnoise
  • 15
  • 7

2 Answers2

0

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

Bassem
  • 3,582
  • 2
  • 24
  • 47
  • Thank you for your answer, I tried but I do not think I really get it. I could not make it work. – nnoise Sep 24 '21 at 14:27
0

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>
Erfan
  • 1,725
  • 1
  • 4
  • 12
  • I received an error as ""App.js: Unexpected token (28:4) 26 | return ( 27 | > 28 | const location= useLocation() | ^ 29 | const isEmployeePanelRendering = location.pathname==="/panel/employee" 30 | 31 | "" – nnoise Sep 24 '21 at 15:04
  • I wrote const location and isEmployeePanelRendering in function App() and I got that error when I wrote those codes out function App() I get error as ""src\App.js Line 24:17: 'useLocation' is not defined no-undef Line 24:17: React Hook "useLocation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks"" – nnoise Sep 24 '21 at 15:06
  • @sdkmen i edited my answer – Erfan Sep 24 '21 at 17:06
  • It worked, thanks for your answers, I am so grateful. – nnoise Sep 27 '21 at 12:05
  • And I would like to ask one more question if you don't mind. What if I also use this way to second page, how should I use if else block according to syntax? – nnoise Sep 27 '21 at 12:08
  • Or is there any way to use like if it contains path, I mean lets say the default path is /panel and I don't want to see menu and footer both of panel/employee panel/employer. Is there any way to do it? – nnoise Sep 27 '21 at 12:14
  • the condition would be : `const isEmployeePanelRendering = location.pathname.startsWith("/panel/") ` @sdkmen – Erfan Sep 27 '21 at 13:08
  • But in such cases, it would be better to not repeat "/panel" route everytime, instead do nested routing : https://reactrouter.com/web/example/nesting – Erfan Sep 27 '21 at 13:11
  • Thank you for every answers. – nnoise Sep 27 '21 at 14:36
  • so far I can't get this working, possibly due to - ```"In V6, you can't use the component prop anymore. It was replaced in favor of element"``` when I try to do it with element I get ```"useLocation() may be used only in the context of a component."``` – mdkb Jan 25 '23 at 06:26