学习记录——react-router-domt路由知识点

BrowserRouter：路由系统根节点，必须要有且只能有一个
HashRouter：路由系统根节点，必须要有且只能有一个
Switch：它的子元素只能是Route或者Redirect，功能是只匹配一个路由，只要匹配成功就不再继续匹配
Route：路由与页面的一一对应关系

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

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

Redirect：重定向

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

Link：类似a标签，路由的跳转

路由的匹配规则
默认为包容性匹配，而不是===准确匹配
全等进行匹配：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：提供了当前路由的匹配情况