reactjs - 如何将 react-router-dom 升级到 v6

Question

我将所有 Switch 元素升级为路由，组件更改为元素
如何更改 v6 的剩余内容

路由.js

import React, { lazy, Suspense } from 'react';
import { HashRouter as Routes, Route, Router } from 'react-router-dom';
import Loading from './components/Loading';
import { ProtectedRoute, WithLayoutRoute } from './routers';
import { AdminLayout, PublicLayout } from './layouts';
const MovieList = lazy(() => import('./pages/Admin/MovieList'));
const MoviePage = lazy(() => import('./pages/Public/MoviePage'));

const Routess = () => {
  return (
    
    <Suspense fallback={<Loading />}>
      
        <Routes>
          <Route exact path="/login" element={<Login/>} />
          <Route exact path="/register" element={<Register/>} />
          <WithLayoutRoute exact path="/movie/:id" layout={PublicLayout} layoutProps={{ withFooter: false }} element={<MoviePage/>} />
          <ProtectedRoute exact path="/admin/movies" layout={AdminLayout} element={<MovieList/>} />
          <Route path="*" element={() => '404 NOT FOUND'} />
          
        </Routes>
    </Suspense>
  );
};

export default Routess;

好的，我按照你说的升级了我的 Routes.js，但我没有更新 WithLayoutRoute 和 ProtectedRoute。怎么改？ 我不知道如何更改它: 保护路由.js:

import...
const ProtectedRoute = ({ layout: Layout, component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Layout>
          <Component {...props} />
        </Layout>
      ) : (
        <Navigate to={{ pathname: '/', state: { from: props.location } }} />
      )
    }
  />
);

ProtectedRoute.propTypes = {
  isAuthenticated: PropTypes.bool
};
ProtectedRoute.defaultProps = {
  isAuthenticated: false
};
const mapStateToProps = state => ({
  isAuthenticated: state.authState.isAuthenticated
});
export default connect(mapStateToProps)(ProtectedRoute);

Answer 1

根据您提供的内容，剩下的就是修复自定义路由组件。 react-router-dom@6 不再支持自定义路由组件，只有 Route 和 React.Fragment 组件是 的有效子组件路由组件。如果您实际运行了上面的代码，您应该看到不变的警告/错误。

将自定义路由组件转换为渲染和 Outlet 的布局组件，每个嵌套的 Route 组件都被渲染到。

例子:

const WithLayoutRoute = ({ layout: Layout, layoutProps}) => {
  ...
  return (
    <Layout {...layoutProps}>
      <Outlet />
    </Layout>
  );
};

const ProtectedRoute = ({ layout: Layout }) => {
  const location = useLocation();
  ...
  return (
    <Layout>
      {auth
         ? <Outlet />
         : <Navigate to="/login" replace state={{ from: location }} />
      }
    </Layout>
  );
};

将您的路线包裹在新的布局 route 。

const Routess = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/login" element={<Login/>} />
        <Route path="/register" element={<Register/>} />

        <Route
          element={(
            <WithLayoutRoute
              layout={PublicLayout}
              layoutProps={{ withFooter: false }}
            />
          )}
        >
          <Route path="/movie/:id" element={<MoviePage/>} />
        </Route>

        <Route element={<ProtectedRoute layout={AdminLayout} />}>
          <Route path="/admin/movies" element={<MovieList/>} />
        </Route>

        <Route path="*" element={'404 NOT FOUND'} />
      </Routes>
    </Suspense>
  );
};

参见 Layout Routes了解更多详情。