带有 Typescript 的 React 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

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

而不是 Switch，使用 Routes。

代替 render 方法，使用 element 这是一个 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

Answer 2

react-router-dom@6中的路线道具没有替代品。组件应该改用 React 钩子：

请注意，RRDv6 中还有其他几个新挂钩。

代码：

<Routes>
  {routes.map((route) => {
    const Component: React.ReactNode | null = route.component;
    return (
      <Route
        key={route.path}
        path={route.path}
        element={<Component />}
      />
    );
  })}
</Routes>

如果路由组件仍然是 class 组件，那么您需要将它们转换为函数组件或创建您自己的自定义 withRouter HOC，因为它在 v6 中也被删除了。

示例：

const withRouter = Component => props => {
  const location = useLocation();
  const params = useParams();
  const navigate = useNavigate();

  return <Component {...props} {...{ location, params, navigate }} />;
};

带有 Typescript 的 React Router Dom v6

React Router Dom v6 with Typescript

reactjs

react-router-dom