CODEWITHSUNDEEP
reactjsreact-router
Raúl Chirinos
Raúl Chirinos

Reputation: 99

How can I show a react component in all routes except one?

I want my ProjectButton component to render in all routes except for /projects. Is there a way a can handle this with react router?

<Router>
    <React.Fragment>
      <Route path={baseURL} component={ProjectButton} />
      <Route exact path={baseURL} component={Home} />
      <Route exact path={baseURL + '/about'} component={About} />
      <Route exact path={baseURL + '/work'} component={Work} />
      <Route exact path={baseURL + '/projects'} component={Projects} />
    </React.Fragment>
  </Router>

Upvotes: 1

Views: 3268

Answers (2)

Nishant Chorge
Nishant Chorge

Reputation: 36

const matched = useRouteMatch("/projects");  
 return (
<Route path={"/"} render={() => (!matched ? <YourComponent /> : null)} />);

With this approach, you can blacklist multiple routes as you can provide an array of routes too in the useRouterMatch hook.

Upvotes: 1

FortyTwo
FortyTwo

Reputation: 2649

You can do it with render props:

<Route path={baseURL} render={props =>
  <>
    <Home />
    <ProjectButton />
  </>
} />

<Route {baseURL + '/projects'} render={props =>
  <Projects />
} />

You can also pass multiple components for a route, see this

Or why not handle it in your component? Return null for certain paths (I personally would prefer this one)

render() {
    const {pathname} = this.props.location;
    if(pathname === "/projects") {
        return null;
    }

    ..
    ..
}

Upvotes: 3

Related Questions