How to use context api with react router v4?

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...

use render method in Route. this will solve your problem as i did this in my App.

<Route
  path="/"
  render={(props) => (
    <ContextB>
      <Component2 {...props} />
    </ContextB>
  )}
/>

thanks for your help, i used this in store context and works!. (createContext and useReducer)

import React, {createContext, useReducer} from "react";
import Reducer from './reducer.js'

const initialState = {
    /* */
};
const Store = ({children}) => {
    const [state, dispatch] = useReducer(Reducer, initialState);

    return (
        <Context.Provider value={[state, dispatch]}>
            {children}
        </Context.Provider>
    )
};

export const Context = createContext(initialState);
export default Store;

/* in App.js*/

const App = () => {

    return (
    <BrowserRouter>
            <Switch>
            <Route exact path="/" render={ (props)=> <Store> <Home {...props} /> </Store> } />
            <Route exact path="/about" render={ (props)=> <Store> <About {...props} /> </Store> } />
            <Route exact path="/login" render={ (props)=> <Store> <Login {...props} /> </Store> } />
            </Switch>

    </BrowserRouter>
    );
};

Hi I found this solution using react-router-dom 6.3 (Don't know if it works in previus versions). It uses Layout. I think is quite simple. The idea is import the context provider into the component layout, and use the layout to wrap the routes that i want to share with that context. Somthing like this.

<BrowserRouter>
  <Routes>
    <Route element={<ComponentContextLayout />}>
      <Route path="/component1" element={<Component1 />} />
      <Route path="/component2" element={<Component2 />} />
    </Route>
  </Routes>
</BrowserRouter>

And then in the ComponentContextLayout :

import { Outlet } from "react-router-dom";
import { ComponentProvider } from "./ComponentContext";

export default function MiPlanContextLayout() {
  return (
    <ComponentProvider>
      <Outlet />
    </ComponentProvider>
  );
};

context that specific to the element.

 <Route
     exact
     path="/route-1"
     element={
        <TheContextProvider>
     <TheRoutElement/>
  </TheContextProvider>
}/>
<Route
  exact
  path="/route-2"
  element={
    <TheContextProvider>
      <TheRoutElement2/>
    </TheContextProvider>
  }/>

Context around the router.
Routes share data.
Rejoice.

Index/App.js

<YourContextProvider>  

   <Router>  
     <Switch>
       <Route>
       </Route>
     </Switch>
   <Router>

</YourContextProvider>

YourContext.js

YourContextProvider = (props)=>{

  yourContext = React.createContext(null);

  value = { shared, state, and, functions }
    return (
       <YourContext.Provider value={value}>
         {props.children}
       </YourContext.Provider>
    )
}
export {YourContext, YourContextProvider}

You can also directly provide the context within the 'element' part of the route.

<Routes>
<Routes path="/endpoint" element ={<ContextProvider><Component/></ContextProvider>}/>
</Routes>

Simple solution:

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