react学习路由遇见的麻烦

原创

坚持学前端 2022-08-19 11:48:08 博主文章分类：笔记 ©著作权

©著作权归作者所有：来自51CTO博客作者坚持学前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

根据我学vue的习惯，喜欢去看官网文档，然后我打开了vue官网，与react官网，我发现了一些不一样的地方，可能是习惯不一样吧，我以为react官网和vue一样把什么都是安排的好好的，我把基础学了一遍，发现没有路由react的教学，我只能靠搜索零零散散的知识点，一步步踩坑过来。

路由的选择对比vue就有几种不一样，vue直接vue-router
而react里面有react-router与react-router-dom
我就不知道使用哪个，后来有博主说使用react-router-dom来做网页，
然后我查了一下两者有什么区别，发现react-router-dom是在react-router之上，加了一些组件比如Link,这个功能类似于vue的routerlinkto也是加载渲染成a标签。
IndexRoute,//这个是当子路由没有被激活而默认显示的路由不存在path是react-router里面的

import
 {
 Route,//用来匹配路由与路径一致实现ui界面更新
 Link,//用来作为a标签跳转路由
 Redirect,//重定向没有历史记录，不会返回
 BrowserRouter,//这个就没有#号
 Switch,//用来匹配路径与路由是否符合
 HashRouter//用了它在localhost路径的时候会出现#号
 } from ‘react-router-dom’
 Route可以嵌套子路由
 两种表示 这是判断路由与url路径< Route />
 < Route >子路由 < Route />
< Route path="/">
 < Route path="/" component={Home}/>
 < Route path="/page">
 < Route path="/page/" component={Pag}/>
 < Route path="/page/one" component={One}/>
 < Route path="/page/two" component={Two}/>
 </ Route>
 < Route path="/about" component={About}/>
 </ Route>
 路由跳转
 使用a标签
 < Link to="{{pathname:’/a’,state:{id:1}}" >
 或者
 事件 this.props.history.push("")或者（{}）
 带参数（"/a/123"）对应< Route path="/a:id"/>
 使用this.props.match.params.id获取id参数
 带参数（{
 pathname:"/a",
 state:{//自定义
 id:1
 }
 }）