Penyelesaian kepada masalah yang halaman penghalaan Reactjs dipaparkan sebagai kosong

Question

Saya menggunakan Reactjs dan saya cuba menggunakan "Penghalaan Dinamik" sekarang, tetapi halaman itu dipaparkan kosong. Ini ialah fail penghalaan saya:

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")));

Saya cuba mengakses fail "User.js" dalam (src/pages), berikut ialah fail User.js saya:

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

Masalahnya ialah anda menambah index=true untuk kedua-dua elemen kanak-kanak. Anda hanya boleh mempunyai satu halaman indeks

Contoh:

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")));

Anda boleh mengetahui lebih lanjut tentang tujuan daripada jawapan yang diterima index=true kepada soalan ini.