Is there a best practice way to hide component using react router?

Question

To hide the navbar on the home component I am doing the following

const NavbarComponent = (props) => {
    console.log(props);

    if (props.match.path === '/') {
        return null;
    } else
        return (

it works fine, I need to have access to the router so I can send people to locations dependant on the props object , is there a better way to do it such that I have all router logic in the same place?

this is the current state of my router

    return (
        <div>
            <Router>
                <Route component={Navbar} />

                <Switch>
                    <Route exact path="/" component={Home} />

                    <Route exact path="/api/:city/electronics" component={Electronics} />
                    <Route exact path="/api/:city/labour" component={Labour} />

                    <Route exact path="/api/posts/item/:id" component={ItemDetails} />

                    <Route exact path="/create/:city/:category" component={CreatePost} />
                </Switch>
            </Router>
        </div>
    );

thanks for your time.

Answer 1

I'm not sure I understand why your NavBar component is in it's own Route . Any components contained within the Router have access to the entire Router api, including Link - they do not need to be a Route to do so.

I would suggest wrapping all the Routes that include the NavBar with that component. The Routes will then be displayed as children of the Navbar component.

Here is a simplified example:

// App.js
return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <NavBar>
            <Route exact path="/electronics" component={Electronics} />
            <Route exact path="/labour" component={Labour} />
          </NavBar>
        </Switch>
      </Router>
    </div>
  );

//NavBar.js
return (
    <>
      <div>
        <Link to="/electronics">Electronics</Link>
        <Link to="/labour">Labour</Link>
      </div>
      <div>{props.children}</div>
    </>
  );

codesandbox