react学习16-React路由react-router动态路由和编程式导航

React-router

动态路由

• 路由的路径可以进行模糊匹配

  • 路由映射的path可以是模糊匹配

  class DynamicRouter extends React.Component {
      render () {
          return (
              <Router>
                  <h1>动态路由</h1>
                  <hr/>
  
                  {/*配置路由的链接*/}
                  <Link to='/info/123'>张三</Link>
                  <Link to='/info/456'>李四</Link>
                  <Link to='/info/456/book/1'>图书一</Link>
                  <Link to='/info/456/book/2'>图书二</Link>
  
                  {/*路由组件的显示位置*/}
                  <Route exact path='/info/:id' component={UserInfo}/>
                  <Route path='/info/:id/book/:bid' component={Book}/>
              </Router>
          )
      }
  }
  

  function UserInfo (props) {
      let userId = props.match.params.id
      const users = [{
          id: 123,
          uname: '张三',
          age: 18,
          gender: '男'
      }, {
          id: 456,
          uname: '李四',
          age: 15,
          gender: '女'
      }]
      let user = users.find(item => {
          return item.id === parseInt(userId)
      })
      return (
          <div>
          	 <div>姓名：{user.uname}</div>
  			<div>年龄：{user.age}</div>
  			<div>性别：{user.gender}</div>
  		</div>
  	)
  }
  

  function Book (props) {
    return <div>图书信息:{props.match.params.bid}</div>
  }
  

编程式导航

• 路由组件-编程式导航基本使用

  • 调用push方法即可跳转
  • 跳转时可以传递参数

    handleLogin = () => {
      // 实现登录
      // 这里应该获取表单数据并且调用后台接口验证用户名和密码是否正确
      let flag = true
      if (flag) {
        // 登录成功，跳转到主页
        // console.log(this.props)
        this.props.history.push('/home', {info: 'hello'})
      }
    }
  

    function Home (props) {
      // 在组件中获取编程式导航的参数
      let info = props.location.state.info
      return <div>主页内容:{info}</div>
    }
  

• 非路由组件-编程式导航

  • 导入withRouter

  import { withRouter } from "react-router-dom";
  

  • 导出时使用withRouter包裹组件

  // 此时，Login组件应该位于一个单独文件里 login.js
  export default withRouter(Login);
  // 另外一个文件需要导入Login组件
  import Login from './login.js'
  

  • 被包裹的组件中可以通过props获取history对象

  let { history } = this.props
  

  • 然后可以使用history对象调用push方法进行跳转

    history.push('/home', {uname: 'lisi'})
  

  • 登录组件

  class Login extends React.Component {
    constructor(props) {
      super(props);
    }
    handle = () => {
      const {history} = this.props;
      history.push('/home', {info: 'hello'});
    }
    render() {
      return (
        <div>
          <div>登录页面</div>
        <div>
            用户名：<input type="text"/>
            密码：<input type="text"/>
          </div>
          <div>
            <button onClick={this.handle}>登录</button>
          </div>
        </div>
      );
    }
  }
  

路由的权限验证

• 关于Route标签的render属性
• 基于render属性进行路由权限组件的封装

import React from 'react'
import { Route, Redirect } from 'react-router-dom'

export default (props) => {
  // 对象结构赋值可以起一个别名
  const { path, component: Component } = props
  return <Route path={path} render={() => {
    // return <div>你好,Kitty</div>
    // 在路由组件渲染内容之前，可以判断路由权限
    sessionStorage.setItem('mytoken', 'admin')
    let token = sessionStorage.getItem('mytoken')
    if (token) {
      // 已经登录，可以正常访问相应组件
      return <Component/>
    } else {
      // 没有登录，跳转到登录页
      return <Redirect to='/login'/>
    }
  }}/>
}

<AuthCheck path='/hello' component={Hello}/>