-
React路由:使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由,路由就是路径与组件之间的映射关系。
// 简单路由 import React, { Component } from 'react' import {NavLink} from 'react-router-dom' export default class MyNavLink extends Component { render() { return ( <NavLink className="list-group-item" {...this.props}/> ) } }
-
路由安装与引入
-
使用npm安装:npm i react-router-dom react-router -g
-
引入路由中的需求组件:
-
import {NavLink} from 'react-router-dom'
-
import {Switch, Route, Router} from 'react-router';
-
-
组件中直接使用:<NavLink className="list-group-item" {...this.props}/>
-
-
区分react-router、react-router-dom、react-router-native
-
react-router
: 实现了路由的核心功能 -
react-router-dom
: 基于react-router
,加入了在浏览器运行环境下的一些功能,例如:Link
组件,会渲染一个a
标签,Link组件源码a标签行; -
react-router-native
: 基于react-router
,类似react-router-dom
,加入了react-native
运行环境下的一些功能。 -
结论:
react-router-dom
依赖react-router
,所以我们使用npm
安装依赖的时候,只需要安装相应环境下的库即可,不用再显式安装react-router
;- 基于浏览器环境的开发,只需要安装
react-router-dom
; - 基于
react-native
环境的开发,只需要安装react-router-native
-
-
路由的基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
<div className="test-router"> <div className="list-group"> // 在React中靠路由链接实现切换组件--编写路由链接 <MyNavLink to="/about">About</MyNavLink> <MyNavLink to="/home">Home</MyNavLink> </div> </div> <div className="test-router"> <div className="panel"> <div className="panel-body"> {/* 注册路由 */} <Route path="/about" component={About}/> <Route path="/home" component={Home}/> </div> </div> </div>
-
路由组件与一般组件
1.写法不同:
一般组件:<Demo/>
路由组件:<Route path="/demo" component={Demo}/>
2.存放文件位置不同:
一般组件:components
路由组件:pages
3.接收到的props不同:
一般组件:写组件标签时传递了什么,就能收到什么
路由组件:接收到三个固定的属性
history:
go: ƒ go(n) // 加载 history 列表中的某个具体页面
goBack: ƒ goBack() // 加载 history 列表中的前一个 URL
goForward: ƒ goForward() // 加载 history 列表中的下一个 URL
push: ƒ push(path, state) // 添加路由 跳转到这个路由(栈)
replace: ƒ replace(path, state) // 替换路由
location:
pathname: "/about" // 返回的URL路径名。
search: "" // 返回一个URL的查询部分
state: undefined
match:
params: {} //
path: "/about" // 返回一个URL路径
url: "/about"
-
React中NavLink组件和Switch组件
-
NavLink:NavLink可以实现路由链接的高亮,可以使用NavLink替代Link。
<NavLink>
标签会自带activeClassName
属性,给属性命名后直接添加样式即可 -
Switch: 通常情况下,path和component是一一对应的关系, Switch可以提高路由匹配效率(单一匹配)。
-
-
路由的严格匹配与模糊匹配
-
严格匹配: exact={true} ,
-
模糊匹配: exact={false},默认使用的是模糊匹配(【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
-
注意:严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
-
-
Redirect的使用
1.一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
2.具体编码:
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
-
路由组件传递参数
1.params参数
路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
接收参数:this.props.match.params
render() { const {msgObj} = this.state return ( <div> <li> {/* 向路由组件传递params参数 */} <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>跳转</Link> </li> {/* 声明接收params参数 */} <Route path="/home/message/detail/:id/:title" component={Detail}/> </div> ) }
2.search参数
路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
接收参数:this.props.location.search
备注:获取到的search是urlencoded编码字符串,需要借助querystring解析
render() { const {msgObj} = this.state return ( <div> <Link to={`/home/detail/?id=${msgObj.id}&title=${msgObj.title}`}>跳</Link> {/* search参数无需声明接收,正常注册路由即可 */} <Route path="/home/detail" component={Detail}/> </div> ) }
render() { console.log(this.props); // 接收params参数 // const {id,title} = this.props.match.params // 接收search参数 const {search} = this.props.location const {id,title} = qs.parse(search.slice(1)) const findResult = DetailData.find((detailObj)=>{ return detailObj.id === id }) return ( <ul> <li>ID:{id}</li> <li>TITLE:{title}</li> <li>CONTENT:{findResult.content}</li> </ul> ) }
3.state参数
路由链接(携带参数):<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
接收参数:this.props.location.state
注意:刷新也可以保留住参数
-
路由嵌套
1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
-
编程式路由导航(BrowserRouter)
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push() // 遵行堆栈中的先进先出的原则
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()
-
BrowserRouter与HashRouter的区别
1.底层原理不一样:
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径包含#,例如:localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响,因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失!!!
4.注意:HashRouter可以用于解决一些路径错误相关的问题。
-
暂无路由更新...
about learn:React 学习_韦金-CSDN博客
about learn:React中 配置代理的方法_韦金-CSDN博客