react router 学习心得

1.介绍react router
react router是rearct官方维护的一个库，可以实现路由跳转包括（HashRouter hash模式 和 BrowserRouter 历史模式）
2.使用（在列组件中使用）

yarn add react-router-dom
#或者，不使用 yarn
npm install react-router-dom

在 index.js中

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom'
import Home from './views/home'
import Login from './views/login'
import Mine from './views/mine'

ReactDom.render(
  <Router>
    <ul>
      <li> <Link to="/home">首页</Link></li>
      <li> <Link to="/login">登录</Link></li>
      <li> <Link to="/mine">个人中心</Link></li>
    </ul>
    <Switch>
      <Route path="/home" component={ Home }></Route>
      <Route path="/login">
        <Login />
      </Route>
      <Route path="/mine" render={() => <Mine />}>
      </Route>
      <Redirect to="/mine" />
    </Switch>
  </Router>,
  document.getElementById('root')
)

Redirect： 重定向的功能，默认把 ‘/’ 重定向到‘/mine’中去

在组件中（类组件）

import React, { Component } from 'react'
import { withRouter, Route, Link, Switch } from 'react-router-dom'
import Profile from './profile'
import Order from './order'

class Mine extends Component {
  render() {
    return (
      <div>
        个人中心
        <ul>
          <li> <Link to="/mine/order/dlsksakass?id=123&token=asdadasd">个人信息设置</Link></li>
          <li> <Link to="/mine/profile">查看历史订单</Link></li>
        </ul>
        <Switch>
          <Route path="/mine/profile" component={ Profile } />
          <Route path="/mine/order/:orderid">
            <Order />
          </Route>
        </Switch>
      </div>
    )
  }
}

export default withRouter(Mine)

withRouter作用：将react-router 的 history、location、match 三个对象传入props对象上” 这样可以在挂载阶段的componentDidMount() 中用this.props获取到这三个对象，里面有很多路由的信息

在order组件中

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import qs from 'querystringify'
class order extends Component {
  componentDidMount () {
    console.log('mounted.......',this.props)
    console.log(this.props.location.search)
    console.log(qs.parse(this.props.location.search.slice(1)))
  }
  render() {
    return (
      <div>
        个人信息
        orderid: { this.props.match.params.orderid }
        search: {
        // qs.parse(this.props.location.search.slice(1))
        }
      </div>
    )
  }
}

export default withRouter(order)

qs:是一个包 （querystringify）可以将地址？后的url 转成对象的形式 如 id=:123&name=‘zhangsan’ 转换成{ id: 123, name: ‘zhangsan’} 这种json格式 反过来也可以

最后的实现demo 可以实现路由跳转

总结

// 几种不同的路由跳转
// 1 path ：路径 component: 组件名称
<Route path="/home" component={ Home } /> 

// 2. 
<Route path="/home">
	<Home />
</Route>

// 3
<Route path="/home" render={() => <Home />} />

// 重定向的方式
<Redirect to ="/home" />

// 路由跳转 to="path"
<div><Link to="/home"> 首页 </Link></div>

// 带parmas
// 目标路由
<li><Link to="/home/login/123?token=qwe&pwd=000"> 登录界面 </Link></li>
<Route to="/home/login/:id">
	<Login />
<Route>
// 需要导出组件时用 withRouter 目标路由和开始路由都需要 才能获取到this.props
export default withRouter(Home)
// 可在目标路由中通过this.props.match.params.id 获取到 123
const paramsId = this.props.match.params.id
// 可以在目标路由中通过this.props 获取到query
// 获取到的是字符串 通过querystringify 这个包可以转成json对象模式
const query = this.props.location.search
// npm install --save querystringify
import qs from 'querystringify'
query = qs.parse(query)