使用 Typescript 反应 Router Dom v6

Question

我已经升级到react-router-dom v6我一直在使用RouteComponentProps来映射路由，如下所示，但想知道如何在v6中实现这一点

<Switch>
        {routes.map((route, index) => {
            return (
                <Route
                    key={index}
                    exact={route.exact}
                    path={route.path}
                    render={(routeProps: RouteComponentProps<any>) => (
                        <route.component {...routeProps} />
                    )}
                />
            );
        })}
    </Switch>

我知道 Switch 现在已被 Routes 取代，但不确定用什么取代 RouteComponentProps

Answer 1

React-router-dom 6.4建议用于createBrowserRouter 网络应用程序。它使用DOM History API来更新URL并管理历史堆栈。

const App = () => {


  const routes = [
    {
      path: "/",
      element: <Dashboard />,
    },
    {
      path: "/messages",
      element: <Messages />,
    },
     {
      path: "/messages/:slug",
      element: <Message />,
    }
  ];

  return <RouterProvider router={createBrowserRouter(routes)} />
};

useLoaderData每个路由都可以定义一个加载器函数，该函数在渲染之前向根元素提供数据。

const AppRoutes = () => {


  const routes = [
    {
      path: "/",
      element: <Dashboard />,
      loader: async () => {
         return fetch(`/api/dashoard`);
      },
    },
    {
      path: "/messages",
      element: <Messages />,
      loader: async () => {
          return fetch(`/api/messages`);
      },
    },
     {
      path: "/messages/:slug",
      element: <Message />,
      loader: async ({param}) => {
          return fetch(`/api/messages/${param.slug}`);
      },
    }
  ];

  return <RouterProvider router={createBrowserRouter(routes)} />
};

const Message = () => {
  const data = useLoaderData()
  return <p> {data.message} </p>

}

您可能也需要使用<Suspanse>。它是一个built-in反应组件。

    <Suspense>
      <RouterProvider router={createBrowserRouter(routes, { basename })} />
    </Suspense>

参考

1. https://reactrouter.com/en/main/routers/create-browser-router

2. https://reactrouter.com/en/main/route/loader

3. https://reactrouter.com/en/main/hooks/use-loader-data

原答案

版本6也没有Switch并删除了该render功能。

而不是Switch使用Routes.

render使用elementwhich来代替该方法React.ReactNode 。

<Routes>
  <Route path="/" element={<Dashboard />} />
  <Route path="messages" element={<DashboardMessages />} />
  <Route path="tasks" element={<DashboardTasks />} />
  <Route path="about" element={<AboutPage />} />
</Routes>;

仅当<route.component />是一个React.ReacNode.

<Routes>
  {routes.map((route, index) => {
    return (
      <Route key={index} path={route.path} element={<route.component />} />
    );
  })}
</Routes>;

参考：

https://reactrouter.com/docs/en/v6/components/route