react-router组件介绍以及配置规则

ReactTraining/react-router的github地址： https://reacttraining.com/react-router/
相关文档：View the docs here

相关组件介绍

HashRouter 有#号，锚点实现

整个路由容器，将来配置路由，是一定要有一个HashRouter

BrowserRouter 没有#号

实现

路由链接 : to

Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签
相当于vue中 router-link 配置路由的连接，最终会渲染成一个a标签

路由链接

作用和Link是一样的，路由跳转 NavLink比Link更强大的一点是可以指定样式

配置路由规则

如何在react项目中使用react-router？

1. 安装react-router包：npm i react-router-dom
2. 需要引入一些组件

import React from 'react'
import Home from './components/Home.jsx'
import User from './components/User.jsx'
import Login from './components/Login.jsx'
import News from './components/News.jsx'
import Nested from './components/Nested.jsx'

import { BrowserRouter, Link, Route, Redirect } from 'react-router-dom';
class App extends React.Component {
  // HashRouter 有#号，锚点实现
  // BrowserRouter 没有#号 
实现
  render() {
    return (
      
        

          

            首页
          
          

            用户
          
          

            登陆
          
          

            嵌套
          
        
         {/* 路由都匹配上exact表示精确匹配 */}
        {/*  */}
        {/* Redirect: 表示路由的重定向 */}
        
        
        
        
        
        {/* /news/:id   表示匹配 /news/xx  /news/a  /news/b */}
        {/*  */}
        
      
    )
  }
}
export default App

Home.jsx

import React from 'react'
export default class Home extends React.Component {
  render() {
    return 
首页
  }
}

使用Switch把一组route包裹起来，保证只显示一个组件

exact

path="/" 只要是/xxx的路由都匹配上exact表示精确匹配

路由参数

/news/:id 表示匹配 /news/xx /news/a /news/b
通过props.match就可以获取到路由的参数
news.jsx

import React from 'react'
export default class News extends React.Component {
  render() {
    // console.log(this.props)
    let { match } = this.props
    console.log(match)
    return (
      
这是News组件
    )
  }
}

Redirect: 表示路由的重定向

withRouter : js来实现react中路由的跳转

react-router编程式导航实现路由跳转
如果想要通过js来实现react中路由的跳转

1. 导入withRouter方法
2. 使用withRouter包裹住当前组件
3. withRouter把当前组件包裹后，在当前组件的props中就能够获取history对象，通过history对象就可以实现路由的额跳转

Login.jsx相关代码

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

class Login extends React.Component {
  render() {
    console.log(this.props.history)
    let {history} = this.props
    return (
      

        这是Login组件{' '}
         history.push('./home')}>点击redirect
      
    )
  }
}
export default withRouter(Login)

嵌套路由

import React from 'react'
import {NavLink, Switch, Route} from 'react-router-dom'
export default class Nested extends React.Component {
  render() {
    return (
      

        

          

            角色管理
          
          

            列表管理
          
          

            商品管理
          
        

        
          
          
          
        
      
    )
  }
}
function Roles() {
  return 
这是roles组件
}
function List() {
  return 
这是list组件
}
function Product() {
  return 
这是product组件
}