How can I use React Router with the Context API?

How can I use React Router with the Context API?

You can use the Context API to manage global state in your React application while using React Router for navigation. This allows you to share state across different components without prop drilling.

Can you give me a code example?

Sure! First, create a context using React.createContext(). Then, wrap your router with a provider for that context. Here's a simple example:

import React, { createContext, useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const MyContext = createContext();

const App = () => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      <Router>
        <Switch>
          <Route path='/' component={Home} />
          <Route path='/about' component={About} />
        </Switch>
      </Router>
    </MyContext.Provider>
  );
};

const Home = () => {
  const { state } = useContext(MyContext);
  return <h1>{state}</h1>;
};

const About = () => <h1>About Page</h1>;

export default App;

What are the benefits of using Context API with React Router?

Using the Context API with React Router allows for better state management across different routes, reduces prop drilling, and makes your components cleaner and more maintainable.