Estoy encontrando un problema bastante extraño con react-routerv6. Mis rutas son así

 <Routes> <Route path="*" element={<NotFound />} /> <Route path="/" element={<Landing />} /> <Route path="/project/:id" element={ <PrivateRoute> <SpecificProjectPage /> </PrivateRoute> } /> </Routes>

Ahora los parámetros de la ruta funcionan bien hasta que recargo la página. La siguiente imagen recrea el error.

El parámetro de ruta desaparece al recargar y la ruta se compara con la última ruta.

Lo que he hecho hasta ahora para arreglar

Intenté instalar la última versión de react-router. Intenté desinstalar react-router y react-router-dom y reinstalar solo react-router-dom.

Editar - 1

Aquí Private Route es básicamente un componente de utilidad que redirige a la página principal si el usuario no está autorizado.

Aquí está su código

 const PrivateRoute = ({ children }) => { let { user } = useAuth(); return user ? children : <Navigate to={'/'} />; };

Y la página no encontrada es un componente representado en rutas comodín, ya que no hay coincidencias para/proyecto en Rutas

Aquí está el código para el <NotFound />

 export default function NotFound() { return ( <Flex direction="column"> <Heading > 404 </Heading> <Text fontSize="18px" mt={3} mb={2}> Page Not Found </Text> <Text color={'gray.500'} mb={6}> The page you're looking for does not seem to exist </Text> <Button colorScheme={'cyan'} variant="solid" onClick={() => { window.location.href = '/'; }} > Go to Home </Button> </Flex> ); }