Estoy tratando de configurar mi proyecto por primera vez usando useRoutes y carga diferida con niños. Pero tengo el problema de que no cargará a los niños cuando se redirija a ese sitio. La página de inicio funciona perfectamente bien.

https://codesandbox.io/s/great-rgb-ippuob?file=/src/Page/Home/index.js Ruta de inicio="/"

 import React from "react"; import { Link } from "react-router-dom"; const Home = () => { return ( <> <h1>Hello Welcome to my beauty page</h1> <Link to="/1">click me</Link> </> ); }; export default Home;

Niños:

 import React from "react"; import { useParams } from "react-router-dom"; const Id = () => { const { id: loadingId } = useParams(); return <h1>Right now you are on the side of: {loadingId}</h1>; }; export default Id;

Aplicación.js:

 import "./styles.css"; import Route from "./Routes"; import { Suspense } from "react"; export default function App() { return ( <> <div className="App"> <Suspense fallback={<p>Loading...</p>}> <Route /> </Suspense> </div> </> ); }

Rutas:

 import { useRoutes } from "react-router-dom"; import React from "react"; export default function Router() { return useRoutes([ { path: "/", element: <Home />, children: [{ path: "/:id", element: <Id /> }] } ]); } const Home = React.lazy(() => import("./Page/Home")); const Id = React.lazy(() => import("./Page/Id"));

Y en Index tengo

 <BrowserRouter> <App /> </BrowserRouter>