react-router v5使用详解（引入、页面栈、BrowserRouter、Switch、Link、Redirect、Prompt、路由传参、v5和v6区别中文文档）

本文详细介绍了React Router的使用，包括如何引入、页面栈管理、基本组件如BrowserRouter、Switch、Link和Route的用法，以及Route的path、component、render属性，重定向Redirect和Prompt组件的配置。同时，讲解了通过withRouter注入路由信息和代码跳转，以及路由参数的传递。最后，提到了React Router v5到v6的变化和关键概念的理解。

BrowserRouter（Router）

引入

项目引入

npm install react-router-dom --save

直接引入

<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>

页面栈

当发生路由切换的时候，页面栈的表现如下：

属性	类型
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

基本使用

下面例子默认只显示one和two，当点击one或two时，下面会对应显示one或two。点击third时会重定向到one。点击other时，显示no match。

import React, { Component } from 'react'
import { Link, BrowserRouter as Router, Switch, Route， Redirect } from 'react-router-dom'
function RouteOne() {
    return <h1>one</h1>
}
function RouteTwo() {
    return <h1>two</h1>
}
export default class testR extends Component {
    render() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to='/first'>one</Link>
                    </li>
                    <li>
                        <Link to='/second'>two</Link>
                    </li>
                    <li>
                        <Link to='/third'>third</Link>
                    </li>