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;
问题在于你为两个子元素添加了
index=true
。你只能有一个索引页面示例:
你可以从这个问题的被接受的答案中了解更多关于
index=true
的目的。