一.React路由介绍

现在的前端应用多时候SPA(Single Page application),也就是只有一个html页面的程序,因为它的用户体验跟好,对服务器的压力更小,所以更加受欢迎,为了有效的使用单个页面来管理多个页面的功能,前端路由应用而生

• 前端路由的功能:让用户从一个视图(页面)导航到另外一个视图(页面)
• 前端路由就是一套映射骨子额,在react中,url的path与组件的对应关系
• 使用react路由简单来说,就是配置路径和组件的匹配

二.路由的基本使用

官方地址 https://reactrouter.com/web/guides/quick-start

• 安装react-router-dom

  yarn add react-router-dom  

• 路由的核心组件
  Router 组件
  BrowserRouter 组件
  HashRouter 组件
  Route 组件
  Link 组件
  NavLink 组件
  Switch 组件
  Redirect 组件
  withRouter包装路由组件

三.路由传递参数

• 1.params参数

 路由链接(携带参数)  <Link to='/xxx/1'>详情</Link>
 注册路由(声明接受) <Route path='/xxx/:id'  component={组件名称}></Route>
 接受参数:  this.props.match.params

• 2.search参数

路由链接(携带参数): <Link to='/xxx/id?1'>详情</Link>
注册路由(无需声明,整除注册即可) : <Route path='/xxx'  component={组件名称}></Route>
接受参数: this.props.location.serach,结合querystring解析

• 3.state参数

路由链接(携带参数): <Link to={{path:"xxx",state:{id:1}}}>详情</Link>
注册路由(无需声明,整除注册即可) : <Route pathname='/xxx'  component={组件名称}></Route>
接受参数: this.props.location.state
特点:刷新'也'可以用(同上)

push与replace模式,replace不留下痕迹(前进,后退)

四.编程式导航

replace与push

• 1.replace跳转+携带params参数 /

  this.props.history.replace("/xxx/id");

• 2.replace跳转+携带query参数 ?

  this.props.history.replace("/xxx?id");

五.默认路由

六.匹配模式