Eu estou tentando fazer reagir-roteador-dom de trabalho com um simples url: /user/{nome} mas, por alguma razão, não pode obtê-lo para carregar a página com a url slug para o nome.
Este é o retorno do meu App componente de função:
<>
<MainNavBar navigation={navigation} />
<Routes>
<Route index={true} element={<Home />} exact />
<Route path="user" element={<User />} exact>
<Route
path=":name"
render={
({ match: { params: { name } } }) => {
console.log(name);
console.log("test2");
return (<UserPage
userName={name}
/>);
}}
/>
</Route>
<Route path="*" element={<PageNotFound />} />
</Routes>
</>
Este é o componente de Usuário; um espaço reservado para a minha depuração atm.
const User = () => (
<div>
<header className="App-header">
<Outlet />
</header>
</div>
);
Quando eu vou para http://localhost:3000/user/test ele carrega o User
componente, mas não para as crianças (Saída/UserPage elementos)
Eu tentei muitas combinações, mas parecem estar fazendo algo errado, então qualquer ajuda seria muito apreciada. Obrigado!