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

Question

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

我已经安装到npm install react-router-dom 我的终端index.js我已经导入BrowserRouter并嵌入了我的应用程序

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 开发的网络应用程序复制了解决方案，但它不起作用，我不明白。

这是错误消息：

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

在“react-router-dom”中找不到导出“Switch”（导入为“Switch”）（可能的导出：BrowserRouter、HashRouter、Link、MemoryRouter、NavLink、Navigate、Outlet、Route、Router、Routes、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”中找不到导出“Redirect”（导入为“Redirect”）（可能的导出：BrowserRouter、HashRouter、Link、MemoryRouter、NavLink、Navigate、Outlet、Route、Router、Routes、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教程都已经过时，并且仍然引用react-router-dom@5API 规范。

您似乎不小心升级/安装了最新版本的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 迁移指南

   从 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>
     );
   }