react-router-dom5相关总结

注意：在写这篇文章的时候，用的是react-router-dom@5,现在路由插件已经到第六版本了，后续也会补充六版本的区别

路由的理解

什么是路由？

1. 一个路由就是一个映射关系（key:value)
2. key为路径，value可能是function或者component；

路由的分类

1. 后端路由：
   • 理解：value就是function，用来处理客户端提交的请求；
   • 注册路由：router.get(path,function(req,res))
   • 工作过程：当node接收到一个请求的时候，根据请求路径找到匹配路由，调用路由中的函数来处理请求，返回响应的数据；
2. 前端路由：
   • 浏览器端路由，value是component，用于展示页面内容；
   • 注册路由：<Route path='/test' component={Test}>
   • 工作过程：当路由器的path变成/test时候，当前路由组件就会变成Test组件；
     底层上是调用浏览器BOM上的history

react-router-dom的理解

1. react的一个插件库
2. 专门用来实现一个SPA应用
3. 基于react的项目基本都会用到这个库

react-router-dom相关API

路由的基本使用

1. 明确好界面中的导航区、展示区
2. 导航区的a标签改成Link标签<Link to="/xxx">Demo</Link>
3. 展示区写Route标签进行路径的匹配
   <Route path="/xxx" component={Demo}/>

路由组件和一般组件

1. 写法不同：
   • 一般组件：<Demo/>
   • 路由组件：<Route path='/home' component={Home} />
2. 存放位置不同
   • 一般组件：components
   • 路由组件：pages
3. 按接收到的props不同
   • 一般组件：写组件标签时候传递了什么，就能接收到什么
   • 路由组件：接收到三个固定的属性history、location、match

内置组件

• <BrowserRouter>
• <HashRouter>
• <Route>
• <Redirect>:一般写在所有路由的最下方，当所有的路由都无法匹配的时候，跳转到由Redirect指定的路由
  <Switch> <Route path='/about' component={About} /> <Route path='/home' component={Home} /> <Redirect to="/about"/> </Switch>
• <Link>
• <NavLink>
• <Switch>

向路由组件传递参数

1. params参数
   • 路由链接（携带参数）： <Link to='/home/message/detail/参数a/参数b'>xxx</Link>
   • 注册路由（声明接收）：<Route path="/home/message/detail/:id/:title" component={Detail}/>
   • 接收参数：const {id,title}=this.props.match.params
2. search传参
   • 路由链接（携带参数）：<Link to='/home/message/detail?id=参数a&title=参数b'>xxx</Link>
   • 注册路由（声明接收）：<Route path="/home/message/detail" component={Detail}/>
   • 接收参数：const {search}=this.props.location
   • 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3. state参数
   • 路由链接（携带参数）：<Link to={{pathname:'/home/message/detail',state:{id:xxx,title:xxx}}}>xxx</Link>
   • 注册路由（声明接收）：<Route path="/home/message/detail" component={Detail}/>
   • 接收参数：this.props.location.state
   • 备注：刷新也可以保留住参数

编程式路由导航

借助this.props.history对象上的API对操作路由的跳转、前进、后退

• this.props.history.push()
• this.props.history.replace()
• this.props.history.goBack()
• this.props.history.goForward()
• this.props.history.go()

withRouter的使用

可以加工一般组件，让一般组件具备路由组件的特有API

withRouter的返回值是一个新组件

HashRouter和BrowserRouter的区别

1. 底层原理不一样：
   • BrowserRouter使用的是H5的history API，不兼容IE9及以下版本；
   • HashRouter使用的是URL的哈希值；
2. url的表现形式不一样
   • BrowserRouter的路径中没有#，例如：localhost:3000/demo/test
   • HashRouter的路径包含#，例如：localhost:3000/#/demo/test
3. 刷新后对路由state参数的影响
   • BrowserRouter没有任何影响，因为state保存在history对象中；
   • HashRouter刷新后会导致路由state参数的丢失；
4. 备注：HashRouter可以用于解决一些路径错误相关的问题