Antes, eu tinha criado 2 contextos como ensina nas aulas. Mas, na versão 6 do React Router eu não consegui fazer funcionar 2 Providers em meio aos Routes. Por exemplo, tentei fazer mais ou menos assim:
<BrowserRouter>
<UsuarioProvider>
<Routes>
<Route path="/" element={<Login/>}/>
<Route path="/feira" element={<Feira/>}/>
</Routes>
</UsuarioProvider>
</BrowserRouter>
Nesse caso, como tínhamos apenas 1 provider estava funcionando. Mas, a partir do momento que tivemos que criar o contexto do carrinho, eu não consegui englobar um outro Provider aí em cima, sempre dava algum erro ou não renderizava. Pesquisei na internet e não encontrei nenhuma alternativa para o meu problema, então resolvi criar apenas 1 contexto (renomeei para Context.js) e passar ele para as rotas da aplicação. Creio que só usufruirá dele, quem de fato instanciar com o useContext.
Context.js:
export const AppContext = createContext();
export const AppProvider = ({children}) => {
const [nome, setNome] = useState('')
const [saldo, setSaldo] = useState(0)
const [carrinho, setCarrinho] = useState([]);
return (
<AppContext.Provider value={{carrinho, setCarrinho,nome,setNome,saldo,setSaldo}}>
{children}
</AppContext.Provider>
)
}
routes.js:
const Router = () => {
const router = createBrowserRouter([
{
path: "/",
element: <Login />,
},
{
path: "/feira",
element: <Feira />,
},
{
path: "/carrinho",
element: <Carrinho />,
},
]);
return (
<AppProvider>
<RouterProvider router={router}/>
</AppProvider>
);
};
Não sei se essa abordagem está correta, e nem sei quais os futuros problemas que ela pode gerar, mas gostaria que alguém me explicasse como fazer com 2 contextos (2 providers)
