React.js 中的路由器和重定向

Question

我是 React 的初学者。 我正在尝试设置路由器并渲染以更改页面，但它给了我无法理解的错误。

我已经安装到终端npm install react-router-dom 在我的index.js 中，我导入了BrowserRouter 并嵌​​入了我的APP

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom"

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

在我的app.js 中，我有来自react-router-dom 的导入路由切换。

import Home from './page/home';
import Authentication from "./page/authentication";
import Header from './componenti/header';
import './App.css';
import DashboardComponent from './page/dashboardComponent';
import {Route, Switch} from "react-router-dom"

function App(props) {
  return (
    <div>
      <Header/>
      <Switch>        
          <Route exact path="/" render={(props)=> <Home/>}/>
          <Route exact path="authentication" render={(props)=> <Authentication/>}/>
          <Route exact path="/dashboard-component" render={(props)=> <DashboardComponent/>}/>
      </Switch>
    </div>
  );
}
export default App;

重定向非常相似，在我的身份验证页面中，我从react-router-dom 导入了重定向，但它不正确。

import styles from '../style/authentication.module.css';
import {useState} from "react";
import {Redirect} from "react-router-dom"

const Authentication = () => {

--- other code ---

    let postLoginRedirect = null;
    if (isLogged) {
    return postLoginRedirect = <Redirect to="/dashboardComponent"/>
    }
    return(
    <div>
    
    </div>
    )
}
export default Authentication

在我看来一切都是正确的，我阅读了很多关于这个主题的内容，我从我用 react 开发的 web 应用程序中复制了解决方案，但它不起作用，我不明白。

这是错误信息：

./src/App.js 18:35-41 中的错误

在中找不到导出“Switch”（导入为“Switch”） 'react-router-dom'（可能的出口：BrowserRouter、HashRouter、Link、 MemoryRouter，NavLink，导航，插座，路线，路由器，路线， UNSAFE_LocationContext，UNSAFE_NavigationContext，UNSAFE_RouteContext， createRoutesFromChildren、createSearchParams、generatePath、matchPath、 matchRoutes、renderMatches、resolvePath、unstable_HistoryRouter、 useHref，useInRouterContext，useLinkClickHandler，useLocation， useMatch，useNavigate，useNavigationType，useOutlet，useOutletContext， useParams, useResolvedPath, useRoutes, useSearchParams)

./src/page/authentication.js 48:52-60 中的错误

在中找不到导出“重定向”（导入为“重定向”） 'react-router-dom'（可能的出口：BrowserRouter、HashRouter、Link、 MemoryRouter，NavLink，导航，插座，路线，路由器，路线， UNSAFE_LocationContext，UNSAFE_NavigationContext，UNSAFE_RouteContext， createRoutesFromChildren、createSearchParams、generatePath、matchPath、 matchRoutes、renderMatches、resolvePath、unstable_HistoryRouter、 useHref，useInRouterContext，useLinkClickHandler，useLocation， useMatch，useNavigate，useNavigationType，useOutlet，useOutletContext， useParams, useResolvedPath, useRoutes, useSearchParams)

Answer 1

如果您使用的是react-router-dom v6，您应该将Switch 替换为Routes

import {Route, Routes } from 'react-router-dom" 

Answer 2

几乎所有的react-router-dom 教程都已过时，仍然参考react-router-dom@5 API 规范。

您似乎不小心升级/安装了最新版本的 react-router-dom，第 6 版。您有两个选择：

1. 降级/恢复到 v5.x 版本

   卸载所有当前版本的 react-router-dom 和 react-dom，然后安装它们的特定 v5 版本。

   从你的项目目录运行：

   • npm un -s react-router-dom react-dom
     

   • npm i -s react-router-dom@5 react-dom@5
     

2. 完成/应用 v5 迁移指南

   Upgrading from v5

   如果您决定继续迁移，那么您可能需要卸载 react-router，因为 react-router-dom 会重新导出来自 react-router 的所有导出内容，或者至少您希望确保它处于相同状态版本。

   卸载：

   npm un -s react-router
   

   或者重新安装最新的：

   • npm un -s react-router-dom react-router
     

   • npm i -s react-router-dom@latest
     

   应用程序

   import {Route, Switch} from "react-router-dom"
   
   function App(props) {
     return (
       <div>
         <Header />
         <Routes>        
           <Route path="/" element={<Home />} />
           <Route path="authentication" element={<Authentication />} />
           <Route path="/dashboard-component" element={<DashboardComponent />} />
         </Routes>
       </div>
     );
   }
   

   身份验证

   const Authentication = () => {
   
     --- other code ---
   
     let postLoginRedirect = null;
     if (isLogged) {
       return <Navigate to="/dashboardComponent" replace />;
     }
     return(
       <div>
         ...
       </div>
     );
   }