Conditional loading component based on ReactRouter path

Question

I used a React-Router, coded this

<Router>
  <div className="app">
    <div className="wrapper">
      <AppHeaderMain />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/list/" component={List} />
        <Route path="/about/" component={About} />
        <Route component={NotFound} />
      </Switch>
      <div className="menu">
        <ul>
          <li><NavLink exact to="/">List</NavLink></li>
          <li><NavLink to="/about/">About</NavLink></li>
        </ul>
      </div>
    </div>
  </div>
</Router>

and I have a question, is it possible to load another component based on Rout path, for example:

path="/" - load <AppHeaderMain />
path="/list/" - load <AppHeaderSubpage />

I know I could insert a AppHeader component into each single component but I would like to don't repeat some additional code which would be required to make that. I mean something like conditional including (loading) component. Is it a good practice? Maybe I must to do exactly how I wrote: include in each single component?

you can add switch and route inside of <AppHeaderMain /> and decide how to render it. but Krasimir answer is a better practice. — Emad Emami
– Emad Emami, Commented Jan 1, 2018 at 20:43

Krasimir · Accepted Answer · 2018-01-01 20:36:44Z

2

I think it is a matter of composition. Why not create a factory function. For example:

function routeHandlerWithAppHeader(Component) {
  return (props) => (
    <div>
      <AppHeaderMain />
      <Component {...props}/>
    </div>;
  );
}

And then use:

<Route exact path="/" component={routeHandlerWithAppHeader(Home)} />

answered Jan 1, 2018 at 20:36

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NetPax Over a year ago

Yes, It works, but still I have to repeat this function with another AppHeaderSub, maybe pass the parameter from {this.routeHandlerWithAppHeader(About, Sub)} to AppHeader e.g. <AppHeader page={sub}>

Collectives™ on Stack Overflow

Conditional loading component based on ReactRouter path

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related