React router show only route without components defined in my browser

Question

Hello in my directions file I set my struct header navbar and my switch foote

const AppRouter = () => (
  <BrowserRouter>
          <Route path="/login" component={AuthPage} exact={true} /> 
          <Route path="/dashboard/addProduct" component={AddProduct} exact={true} /> 
   <div>
    <Header/>
    <Navigation/>
    <Container maxWidth="lg" >
      <Switch>
        <Route path="/" component={LandingPage} exact={true} /> 
        <Route path="/xd" component={AuthPage} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>
      </Container>
    </div>  
  </BrowserRouter>
);

But I have two routes where I didn't want to show my header footer and nav bar

which are the login and addproduct routes

how could i do that?

You'd have to try wrapping those routes in a Switch too – Shawn Yap Dec 11 '19 at 21:32 — Shawn Yap, Dec 11 '19 at 21:32
could you help me how? I'm a little confused. – Marcus slan Dec 11 '19 at 21:37 — Marcus slan, Dec 11 '19 at 21:37

score 0 · Answer 1 · answered Dec 12 '19 at 06:28

This is a little bit hacky (just to match your current approach) since I'm assuming you just want to hide those components in only those 2 routes, You can use withRouter in your Header and Navigation components, withRouter will provide to you the location prop and you can have a condition like this:

import React from "react";
import { withRouter } from "react-router-dom";

const Navigation = props => {
  const { location } = props;
  const { pathname } = location;

  if (pathname !== "/login" || pathname !== "/dashboard/addProduct" ) {
   return (
     // Component logic goes here
   );
  }
  // if we're on those routes we should return null to not render anything
  return null;
};

export default withRouter(Navigation);

If you want a more robust long term approach this answer could help: How to hide navbar in login page in react router

React router show only route without components defined in my browser

1 Answers1

Linked