Como compartilhar contexto entre rotas no React 6

Olá, Eusebio!

Compartilhar contexto entre rotas no React pode ser uma tarefa um pouco desafiadora, mas é possível utilizando a ContextAPI. Para isso, você pode criar um contexto em um componente de nível superior, que engloba todas as rotas, e passar esse contexto para os componentes filhos através da propriedade "value".

Segue um exemplo de como você pode fazer isso:

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

// Cria o contexto
export const MyContext = createContext();

function App() {
  const [state, setState] = useState({});

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

function Home() {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <h2>Home</h2>
      <p>{state.message}</p>
      <button onClick={() => setState({ message: 'Hello from Home!' })}>
        Set message
      </button>
    </div>
  );
}

function About() {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <h2>About</h2>
      <p>{state.message}</p>
      <button onClick={() => setState({ message: 'Hello from About!' })}>
        Set message
      </button>
    </div>
  );
}

function Contact() {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <h2>Contact</h2>
      <p>{state.message}</p>
      <button onClick={() => setState({ message: 'Hello from Contact!' })}>
        Set message
      </button>
    </div>
  );
}

export default App;

Nesse exemplo, criamos o contexto "MyContext" no componente "App", que engloba todas as rotas. Em seguida, passamos esse contexto para os componentes filhos através da propriedade "value".

Nos componentes filhos, utilizamos o hook "useContext" para acessar o contexto e compartilhar o estado entre as rotas.

Espero ter ajudado e bons estudos!