我正在使用Reactjs,并且现在正在尝试使用“动态路由”,但是页面显示为空白。这是我的路由文件:
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")));
我正在尝试访问(src/pages)中的“User.js”文件,这是我的User.js文件:
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; Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
问题在于你为两个子元素添加了
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的目的。