Alguem conseguiu reproduzir isso no react 6 ? Alura deveria manter isso atualizado...
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Alguem conseguiu reproduzir isso no react 6 ? Alura deveria manter isso atualizado...
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!