Alguém sabe me dizer como usar um provider com ContextAPI para duas rotas diferentes no react-router-dom versão >=6?

Alguém sabe me dizer como usar um provider com ContextAPI para duas rotas diferentes no react-dom-routes versão >=6?

No curso React: gerenciamento de estados globais com ContextAPI é usado a versão ~5 do react-router-dom mas gostaria de saber como fazer na versão 6.

Já consultei a documentação e ficaria assim:

<Route path="/" element={<UserProvider />}>
    <Route index element={<Login />} />
    <Route path="feira" element={<Feira />} />
</Route>

Porém não deu certo. O provider precisa receber as páginas como children mas se não me engano na forma da documentação o element é passado como um componente.

Para fazer para apenas uma rota está assim:

<Route
    path="/" 
    element={
        <UserProvider>
            <Login />
        </UserProvider>
    }
/>

Na versão 5 é só subir o UserProvider de nivel deixando assim:

<UserProvider>
    <Route path="/" element={<Login />} />
    <Route path="/feira" element={<Feira />} />
</UserProvider>

Já na versão 6 é diferente.

Alguém sabe me dizer como funciona na versão 6?

// Envelopando através do main.js ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( <React.StrictMode> <DataContextProvider> // Provider <BrowserRouter> <App /> </BrowserRouter> </DataContextProvider> </React.StrictMode> ) // Envelopando no app.js return ( <DataContextProvider> // Provider <Header props={(key, setKey)} /> <Router> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/configuration" element={<Configuration />} /> </Routes> </Router> </DataContextProvider> );

Mergulhe em programação