"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 这个页面

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。