React set state/props on route using react router

Question

I am somewhat new to React. so please bear with me. I have the following base structure:

<App>
 this.props.children
</App>

...and in children, one component is a header that has what I want to be an optional search component:

<Header>
  ...some other children...
  <Search /> <- STUCK HERE SHOULD BE OPTIONAL!!!
</Header>
 ...children from other components...

What I am trying to do is say when I go to route A, the search component should not be included (or at least not shown), but when I go to route B, it should. I have scoured for days and so far been unable to find a solution that meets this need. If it matter, I am using ES6/7 (babel via webpack).

I can set state in the APP and toggle it literally to adjust the passed down props on the Search and show or not show it, but cannot figure out how to do that dynamically based on the route.

The core issue is how to tell App (and indirectly Header) to show the search component on inside the Header on some routes, but not on others. I 'think' maybe I need some sort of abstraction/wrapper component in the middle, but am not really sure. Any though or ideas are welcome.

TIA!

Dan Prince · Accepted Answer · 2015-11-29 17:35:27Z

First setup your routes.

<Router path="/" component={App}>
  <Route path="foo" component={Header} showSearch={true} />
  <Route path="bar" component={Header} showSearch={false} />
</Router>

The route will be passed down as a property, then you can access the showSearch property, which determines whether the search component is rendered.

// Header
render() {
  const { showSearch } = this.props.route;

  return (
    <div className='header'>
      // ... other components
      { showSearch ? <Search /> : null }
    </div>
  );
}

Maybe you don't want your header to be the top level component though. In that case define an intermediary wrapper component that forwards the route props down to the header.

<Router path="/" component={App}>
  <Route path="foo" component={Shell} showSearch={true} />
  <Route path="bar" component={Shell} showSearch={false} />
</Router>

// Shell
render() {
  const { route } = this.props;
  return (
    <div className='shell'>
      <Header {...route} />
    </div>
  );
}

Alternatively, you could do a quick and dirty check from inside your Header component.

// Header
render() {
  const { hash } = window.location,
        showSearch = /\/foo/.test(hash);

  return (
    <div className='header'>
      // ... other components
      { showSearch ? <Search /> : null }
    </div>
  );
}

Vippy · Accepted Answer · 2021-01-06 23:41:59Z

0

If you want to use functional components, React Router has specifically created an API for this called render for this purpose.

Example:

<Route
  path='/search'
  render={(props) => (
    <Header {...props} showSearch={true} />
  )}
/>

Then just simply use the props as normal in your component:

interface HeaderProps {
  showSearch: boolean
}

export const Header: React.FC<HeaderProps> = ({ showSearch }) => {
  return (
    <React.Fragment>
      { showSearch ? <Search /> : null }
    </React.Fragment>
  )
}

See the excellent article written by Tyler McGinnis regarding this implementation: https://ui.dev/react-router-v4-pass-props-to-components/

answered Jan 6, 2021 at 23:41

Vippy

1,4325 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

React set state/props on route using react router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related