reactjs 旧版本的react-router-dom中的代码在新版本的react-router-dom上不起作用

hec6srdp  于 2023-02-12  发布在  React
关注(0)|答案(2)|浏览(502)

我有一个consts.js文件

export const ADMIN_ROUTE = '/admin'
export const LOGIN_ROUTE = '/login'
export const REGISTRATION_ROUTE = '/registration'
export const SHOP_ROUTE = '/'
export const BASKET_ROUTE = '/basket'
export const DEVICE_ROUTE = '/product'

我有一个routes.js文件

import Admin from "./pages/Admin"
import Auth from "./pages/Auth"
import Basket from "./pages/Basket"
import DevicePage from "./pages/DevicePage"
import Shop from "./pages/Shop"
import {
  ADMIN_ROUTE,
  BASKET_ROUTE,
  DEVICE_ROUTE,
  LOGIN_ROUTE,
  REGISTRATION_ROUTE,
  SHOP_ROUTE
} from "./utils/consts"

export const authRoutes = [
  {
    path: ADMIN_ROUTE,
    Component: Admin
  },
  {
    path: BASKET_ROUTE,
    Component: Basket
  }
]

export const publicRoutes = [
  {
    path: SHOP_ROUTE,
    Component: Shop
  },
  {
    path: LOGIN_ROUTE,
    Component: Auth
  },
  {
    path: REGISTRATION_ROUTE,
    Component: Auth
  },
  {
    path: DEVICE_ROUTE + '/:id',
    Component: DevicePage
  },
]

App.js

import { BrowserRouter } from "react-router-dom";
import AppRouter from "./components/AppRouter";

function App() {
    return (
      <BrowserRouter>
        <AppRouter/>
      </BrowserRouter>
    );
}

export default App;

AppRouter.js

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { authRoutes, publicRoutes } from '../routes';

const AppRouter = () => {
  const isAuth = false;
  return (
    <Switch>
      {isAuth && authRoutes.map(({path, Component}) => 
        <Route key={path} path={path} component={Component} exact />
      )}
      {publicRoutes.map(({path, Component}) => 
        <Route key={path} path={path} component={Component} exact />
      )}
    </Switch>
  );
};

export default AppRouter;

我得到了错误export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'。我尝试了所有的变体,尝试将Switch替换为Router等,但没有任何帮助。我知道他们删除了react-router-dom@6.0中的Switch,但我不知道如何修复此代码使其工作。

juud5qan

juud5qan1#

react-router-dom@6中的Routes组件取代了Switch组件。此外,Route组件API也发生了变化,不再使用componentrenderchildren函数属性,而是使用单个element属性,该属性取React.ReactNode(又名JSX)值。
示例:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { authRoutes, publicRoutes } from '../routes';

const AppRouter = () => {
  const isAuth = false;
  return (
    <Routes> // <-- Directly wrap all Route components
      {isAuth && authRoutes.map(({path, Component}) => (
        <Route
          key={path}
          path={path}
          element={<Component />} // <-- ReactNode/JSX
        />
      ))}
      {publicRoutes.map(({path, Component}) => (
        <Route
          key={path}
          path={path}
          element={<Component />} // <-- ReactNode/JSX
        />
      ))}
    </Routes>
  );
};

有关从v5到v6的所有重大更改的更多详细信息,请参见Migrate from v5指南。

xt0899hw

xt0899hw2#

对于react-router-dom v6,必须使用浏览器路由器和路由组件

const AppRouter = () => {
  const isAuth = false;
    return (
      <BrowserRouter>
        <Routes >
        {isAuth && authRoutes.map(({path, Component}) => 
          <Route path={path} component={<Component />} />
        )}
        {publicRoutes.map(({path, Component}) => 
          <Route key={path} component={<Component />} />
        )}
        </Routes>
      </BrowserRouter>
      
  );
};
export default AppRouter;

相关问题