How to use context api with react router v4?

Question

I'm trying here on my application to do some tests with the new context API from React 16.3 but I can't understand why my redirect never works.

<ContextA>   <Switch>     <Route exact path='/route1' component={ Component1 } />     <ContextB>       <Route exact path='/route2' component={ Component2 } />       <Route exact path='/route3' component={ Component3 } />     </ContextB>     <Redirect from='/' to='/route1' />   </Switch> </ContextA> 

I don't want to have my ContextB available for all the routes, just 2 and 3. How can I do this?

Answer 1

It looks like that <Switch> should only have <Route> and <Redirect > components as direct children. (source)

I suppose that's why your Redirect doesn't work as you use ContextB as a Switch child.

The simplest but repetitive solution could be to pass your ContextB as a child of each <Route> you want:

Note: These solutions suppose that you assigned the default value of your Context component like this: const MyContext = React.createContext(defaultValue);

<Route exact path='/route2'>   <ContextB.Provider>     <Component1 />   </ContextB.Provider> </Route> 

You can even create a ContextRoute component for this:

import React from 'react'; import { Route } from 'react-router-dom';  const ContextRoute = ({ contextComponent, component, ...rest }) => {   const { Provider } = contextComponent;   const Component = component;    return (     <Route {...rest}>       <Provider>         <Component />       </Provider>     </Route>   ); };  export default ContextRoute; 

And then use it as a Route:

<ContextA>   <Switch>     <Route exact path='/route1' component={ Component1 } />     <ContextRoute exact path='/route2' contextComponent={ContextB} component={ Component2 } />     <ContextRoute exact path='/route3' contextComponent={ContextB} component={ Component3 } />     <Redirect from='/' to='/route1' />   </Switch> </ContextA> 

With this solution, you then use your context with render props in your nested Components:

return (   <ContextB.Consumer>     {value => <div>{value}</div>}   </ContextB.Consumer> ); 

But we can imagine much more solutions to this like HOC, passing context value directly to the route component props, etc...