reactjs 如何迁移到React Router 6.9.0中的“组件路由”

mmvthczy  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(145)

到目前为止,我将 React Elements 用于 React Router

...
    return (
        <Suspense fallback={<div>...</div>}>
            <Routes>
                <Route path="/" element={<Home />} />
            </Routes>
        </Suspense>
    );

如何使用const componentRoutes = [{path: '/', Component: Home }]等新的 * 组件路由 *?

pu82cl6c

pu82cl6c1#

您可以在文档中找到:https://reactrouter.com/en/main/start/tutorial
我的建议是:

import {createBrowserRouter} from "react-router-dom";

import HomePage from "../pages/home-page/HomePage";
import ProfilePage from "../pages/profile-page/ProfilePage";

const router = createBrowserRouter([
    {
        path: "/",
        element: <HomePage />,
    },
    {
        path: "/profile",
        element: <ProfilePage />,
    }
])

function App() {
  return (
    <>
      <RouterProvider router={router} fallbackElement={<>Loading...</>}/>
    </>
  );
}

export default App;

希望对你有帮助。

相关问题