react路由 react-router-dom基本使用

安装包
npm install react-router-dom

import引用react-router-dom几个内置组件的用法和作用

import {
    
    
   BrowserRouter as Router,//BrowserRouter 使用as 别名叫（Router）在最外层包裹，项目里只需要用一次
   Switch,//匹配对应的Router 用法 包裹在Router的外面
   Route,//有path属性 用来匹配浏览器中的路径 根据路径加载对应的组件
   Link,//相当于vue中的router-link 可以实现路径的变化
   Redirect,//从当前路由重定向到目标路由
   NavLink
} from 'react-router-dom'

BrowserRouter as Router：as关键字，用来给导入的变量设置新的名字
BrowserRouter：最外层的组件，可以理解为一个容器，用来放Route、Link，里面只能有一个节点
HashRouter：路由系统根节点，必须要有且只能有一个
Switch：包裹Route，匹配与当前访问地址匹配的Route,它的子元素只能是Route或者Redirect，功能是只匹配一个路由，只要匹配成功就不再继续匹配
Route：路由与页面的一一对应关系,用来匹配浏览器的路径
Link:相当于a链接,路由的跳转

  <Route path="/home" component={
    
    Home} />
  <Route path="/detail" render={
    
    ()=>Detail} />

path：路径
component：路径匹配的组件
exact：是否准确匹配
render：返回虚拟dom，功能与component类似，但更加灵活，可以对匹配的组件进行传参

Redirect 重定向

<Redirect from="/" to="/home" />

路由匹配规则：
默认为包容性匹配，而不是===准确匹配
全等进行匹配：exact属性

<Route path="/home" component={
    
    Home} exact/>

路由跳转：

声明式：Link标签
编程式：
this.props.history.push(’/home’) 页面跳转
this.props.history.replace(’/home’)不会留下历史记录
this.props.history.goBack()返回
this.props.history.go(-1)返回

路由传参：

声明式：

 <Link to="/home?id=1"><Link>

编程式：

	this.props.history.push({
    
    
 			pathname:'/home',
 			state:{
    
    
 				id:1
 			}
 	})

接收传过来的参数：this.props.history.location

路由信息：

history：管理访问记录，同时提供js方式的路由跳转
location：提供了当前访问的路由信息
match：提供了当前路由的匹配情况

参考大佬：https://blog.csdn.net/sakura_zr/article/details/111238784

react路由 react-router-dom基本使用

猜你喜欢