react-router

React-router

React Router之前版本的思想是传统的思想：路由应该统一在一处渲染， Router 4之后是这样的思想：一切皆组件

React Router包含了四个包:

包名	Description
react-router	React Router核心api
react-router-dom	React Router的DOM绑定，在浏览器中运行不需要额外安装react-router
react-router-native	React Native 中使用，而实际的应用中，其实不会使用这个。
react-router-config	静态路由的配置

主要使用react-router-dom

• 安装

使用

React中路由模式有两个

​ HashRouter #/home hashchange 不需要后端支持

​ BrowserRouter /home H5提供的popchange 后端支持的

//index.js中
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <Router>
    <App />
  </Router>
  , document.getElementById('root'));

重定向

• 引用 import { Route,Redirect } from 'react-router-dom'

• 包含了Route的引用

• 使用

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

  • from：来源
  • to：去向
  • exact：完全匹配

Route

• 路由的展示区域

  • path：路由路径
  • component：路由路径对应的展示的组件
  • render：表示渲染一个组件
    • 返回一个jsx结构
      • 组件
      • 函数
  • children：表示子组件
  • exact：完全匹配

  <Route path = "/home"  component = { Home }
  <Route path = "/detail/:id" component = { Detail } /> //动态路由
  <Route path = "/account/login" component = { Login }/> //二级路由
  

• Route组件身上component vs render vs children

  • component的话是渲染一个组件，会给这个组件添加几个路由属性
    • location
    • history
    • match
    • 具有以上属性的组件我们称之为路由组件
  • render 的话仅仅是渲染一个组件，不会给这个组件添加任何属性
  • children 也是渲染一个组件，但是不管你的路由路径是什么，它都渲染
  • 使用component的方式是不能直接在组件上添加属性的。所以，React Router的Route组件提供了另一种渲染组件的方式 render, 这个常用于页面组件级别的权限管理。

Switch

• 表示一次只能展示一个组件

• 可以实现类似按需加载组件的作用，可以起到一定的性能优化作用

• 引入 import { Switch,Route } from 'react-router-dom'

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

路由的跳转

• react-router-dom 路由的跳转有两个组件： Link NavLink( NavLink用于激活的路由)
• 引入import { NavLink } from 'react-router-dom'

<NavLink
	to = { item.path }             //跳转路径
	activeClassName = "active"     //激活类名
>

动态路由

<Route *path* = "/list" *component* = { List }/>

<Route *path* = "/list/:id" *component* = { List }/>

• 以上两个形式都可以，但是如果写了/:id之后，路径必须全跟,且必须有个id

• 路由传参

  • to属性中为对象时<Link to = { {} } > </Link>

    • pathname:跳转的路径

    • search:?name=aaa传递的url（参数）

    • state:{ fromDashboard: true } // 自定义属性存在location中

    • hash: '#the-hash', // 在url参数后面的hash值
      

• 路由接参(search传递的参数)

  • 可以使用qs模块import qs from 'querystring
  • qs.parse(this.props.location.search.slice(1))

编程式导航

• push
  • push会将我们的操作存储浏览器的历史纪录
• replace
  • replace不会将我们的操作存储到浏览器的历史纪录，效果看上去像返回了二级

常规跳转

• go
• goBack

withRouter

• 它的作用就是将普通组件改成伪路由组件
  • 解决返回等功能时，Layout组件上没有路由属性的问题
• 监听整个项目路由变化情况

import { withRouter } from 'react-router-dom'

class Layout extends Component{}

export default withRouter(LayOut)