Lösung für das Problem, dass die Routing-Seite von Reactjs leer angezeigt wird

Question

Ich verwende Reactjs und versuche jetzt, „Dynamic Routing“ zu verwenden, aber die Seite wird leer angezeigt. Das ist meine Routing-Datei:

export default function Router() {
  return useRoutes([
     {       
     path: "/",
     element: <Layout />,
     errorElement: <Page404 />,
     children: [
        { element: <HomePage />, index: true },
        { element: <User />, index: true },
                ],     
        },  
        ]); 
}

const HomePage = Loadable(lazy(() => import("../pages/HomePage")));
const User = Loadable(lazy(() => import("../pages/User")));
const Page404 = Loadable(lazy(() => import("../pages/Page404")));

Ich versuche, auf die Datei „User.js“ in (src/pages) zuzugreifen. Hier ist meine User.js-Datei:

import React, { useEffect, useState } from "react";
import { useParams, withRouter } from "react-router";
import axios from "axios";
const User = (props) => {
    const params = useParams();
    const [users, setUsers] = useState({});
    useEffect(() => {
        async function fetchData() {
            const res = await axios(
                `https://jsonplaceholder.typicode.com/comments/${params.id}`
            );
            console.log("INDI", res.data);
            setUsers(res.data);
        }
        fetchData();
    }, []);
    return (
        <>
        <div>Hello worldddddddd</div>
        </>
    );
};

export default User;

Answer 1

问题在于你为两个子元素添加了index=true。你只能有一个索引页面

示例：

return useRoutes([
   {       
   path: "/",
   element: <Layout />,
   errorElement: <Page404 />,
   children: [
      { element: <HomePage />, index: true },
      { element: <User />},
              ],     
      },  
      ]); 
}

const HomePage = Loadable(lazy(() => import("../pages/HomePage")));
const User = Loadable(lazy(() => import("../pages/User")));
const Page404 = Loadable(lazy(() => import("../pages/Page404")));

你可以从这个问题的被接受的答案中了解更多关于index=true的目的。