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

Question

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

我已经安装到终端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

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: 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

export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom' (possible exports: 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 v6，您应该将 Switch 替换为 Routes

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

Answer 2

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

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

Downgrade/revert回版本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
```

Complete/apply v5 迁移指南

Upgrading from v5

如果您决定继续迁移，那么您可能想要卸载 react-router，因为 react-router-dom re-exports 来自 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>
  );
}

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

Router and redirect in React.js

reactjs

react-router

react-router-dom