React系列(一) - 脚手架创建项目
 React系列(二) - react基础知识
 React系列(三) - DOM操作
 React系列(四) - react生命周期
 React系列(五) - 组件通信

React Router保持UI和URL同步 react中有react-router和react-router-dom两种模块，实现路由跳转

react-router：实现了路由的核心功能。如Router、Route、Switch等。但没有提供有关dom操作进行路由跳转。
react-router-dom：基于react-router，加入了一些在浏览器运行环境下的功能。提供了BrowserRouter、Route、Link等api，可以通过dom操作触发事件，控制路由

路由中常用的一些属性

path:匹配路径
component:匹配组件
render:匹配组件中有子路由的时候使用
Link:跳转
NavLink:导航跳转
Switch:匹配到第一个路由后边不会继续匹配
Redirect:重定向
HashRouter:hash路由
BrowserRouter:history路由

跳转

安装react-router-dom，会自动安装上react-router

在Route上配置

import React from 'react'
import { HashRouter, Route, Link, BrowserRouter } from 'react-router-dom'

import Home from './home'
import About from './about'

export default class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <div>
                        <span>
                            <Link to="/home">home</Link>
                        </span>
                        <span>
                            <Link to="/about">about</Link>
                        </span>
                    </div>
                    <Route path="/" component={Home} exact/>
                    <Route path="/about" component={About} exact/>
                </div>
            </BrowserRouter>
        )
    }
}

通过上面的配置，每个url对应的组件：

URL	组件
/home	Home
/about	About

当我们在浏览器中输入localhost:3000/about时，渲染的就是About这个组件的内容

使用js跳转

import React from 'react';

export default class App extends React.Component {
    
    btnJump = () => {
        this.props.history.props('/about')
    }
    
    render() {
        return (
            <div onClick={this.btnJump}>跳转</div>
        )
    }
}

动态路由

代码

<Route path="/about/:id" component={About} exact/>

当我们获取某个文章详情时，可能需要知道文章的id，访问某篇文章直接访问localhost:3000/about/123456，about后面的路径是动态变化的

获取id this.props.match.params.id

路由传参

params

// A页面
import React from 'react';
import { Route, Link, BrowserRouter } from 'react-router-dom';
import About from '../about/about';

class Home extends React.Component {

  constructor(props) {
    super(props)
    console.log(this.props)
  }

  render() {
    return (
      <BrowserRouter>
      <div>
         <div>
            <span>
              <Link to="/about">home</Link>
            </span>
        </div>
        <Route path="/about/:id" component={About} exact/>
      </div>
      </BrowserRouter>
    )
  }
}

export default Home;

// B页面获取
import React from 'react';

class About extends React.Component {

  componentDidMount() {
    console.log(this.props.match.params.id)
  }

  toHome = () => {
    this.props.history.goBack()
  }

  render() {
    return (
      <div onClick={this.toHome}>about</div>
    )
  }
}

export default About;

React系列(六) - 路由

跳转

动态路由

路由传参