"react-router-dom": "^5.3.0",

在之前的react 项目中我们通过yarn add react-router-dom 引入react-router-dom文件

导入的文件的版本是5.3.0

然后再<App /> 这个组件中，我们这样写：

import React from 'react'
import { BrowserRouter as Router,Route,Switch } from 'react-router-dom';
import UserLogin from '@/components/UserLogin.js'
import HomeIndex from '@/components/HomeIndex.js'
import history from '@/components/History.js'export default class App extends React.Component{render(){return (<Router history={history}><Switch>  <Route path="/" component={UserLogin} /><Route path="/index" component={HomeIndex} /></Switch></Router>);}
}

那么在项目启动之后，localhost:3000 自动的显示是UserLogin 的页面，

但是这两天我同样使用yarn add react-router-dom 引入路由的包：

自动添加的却是 react-router-dom的6.0.2的包，版本的升级导致出现了

‘Switch‘ is not exported from ‘react-router-dom‘

Switch 在新的版本中，不能用了

说是变成了Routes，于是我把代码这样调整：

import React from 'react'
import { BrowserRouter as Router,Route,Routes} from 'react-router-dom';
import history from '@/components/history/History.js'
import IndexMenu from '@/components/IndexMenu.js'
import UserLogin from '@/components/login/UserLogin.js'export default class App extends React.Component{render(){return (<Router history={history}><Routes>  <Route path="/index" component={IndexMenu} /><Route path="/" component={UserLogin} /></Routes></Router>);}
}

我把原来代码中的Switch 换成了Routes 但是项目启动，并没有像我想的那样，页面并没有直接跳转到 UserLogin 这个组件

那里错了

                 <Route path="/" element={<UserLogin />} /><Route path="/index" element={<HomeIndex />} />

route 标签中的内容也要做相应的修改

然后，我们启动项目，默认跳转到UserLogin 这个页面

react-router-dom v6 中的Routes相关推荐

React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
React Router 升级 v6: Redirect 重定向替代方案
React Router 升级 v6: Redirect 重定向替代方案文章目录 React Router 升级 v6: Redirect 重定向替代方案 React Router v6 Redir ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...
在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
React Router V6 新特性
安装 npm install react-router-dom@6 配置路由 import { render } from "react-dom"; import {Browser ...
React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
React Router 中文文档（一）
React Router 中文文档(一) React Router 中文文档(一) 官方英文文档 - https://reacttraining.com/rea... 版本 - v4.2.0 < ...
React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...

react-router-dom v6 中的Routes

‘Switch‘ is not exported from ‘react-router-dom‘

react-router-dom v6 中的Routes相关推荐

最新文章

热门文章