reactjs - 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 中的错误

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 你应该用 Routes 替换 Switch

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