React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由

说动态路由之前，先看看路由参数都有哪些？

1、路由参数

1-1、history 历史记录及路由给我们的一些操作
路由是根据历史记录跳转视图

history对象中提供了很多方法，便于用户再浏览历史记录中跳转。
go() 方法可以回到历史记录中的某一页面， 通过与当前页面相对位置来标志 。
当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数，
即在 history 记录中向前或者后退多少步。

history.goBack()方法可以回到历史记录中的上一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(-1)。

goForward() 方法可以回到历史记录中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

history.push() 修改当前的url，会向history中添加一条新记录，
当用户点击浏览器的回退按钮可以回到之前的路径。

history.replace() 修改当前的url
它与history.push()相似，它和push方法不同的地方是，
它不会向 history 添加新记录，而是直接替换掉当前的 history 记录。

src/view/index.js

import React from 'react';
export default function IndexPage(props) {
   
    let {
    history } = props;
    console.log("history对象",history);
    return (
        <div>
            <h1>首页</h1>
            <button onClick={
   () => {
          
                // history.go(-1);// 向后移动一个页面(等同于调用goBack())
                // history.go(1); // 向前移动一个页面(等同于调用了goForward())
             
                // history.goForward();
                 
                // history.push("/about");

                history.replace("/about","跳转时带的参数");

            }}>点击跳转</button>
        </div>
    );
}

• 1-2、location 获取当前url的一些信息

  • pathname 当前url
  • search 参数
  • state 跳转路由时传递的参数

  src/view/about.js

import React from 'react';
export default function AboutPage(props){
   
    let {
   location} = props;
    console.log("location对象",location);
    return (<h1>关于我们</h1>);
}

我们在页面由"首页"跳转到"关于"页面时，在index.js中使用了 history的replace()方法，
并在跳转路由时，携带了state参数,所以在控制台输出一下location对象的内容，可以看到这个参数传过来了。

• 1-3、match 当前路由匹配的相关规则
  • params 动态路由传过来的参数

let {
   location,match} = props;
console.log("location对象",location);
console.log("aa",match);

2、withRouter组件

2-1、获取路由对象的方式
如果一个组件不是路由绑定组件，那么该组件的 props 中是没有路由相关对象的。怎么办？

• 通过传参的方式传入，但是如果结构复杂，这样做会特别的繁琐。

新建文件 src/view/inner.js

import React from 'react';
function Inner(props) {
   
    console.log(props);
    return (
        <div>
            <h2>Inner</h2>
        </div>
    )
}
export default Inner;

src/view/about.js修改

import React from 'react';
export default function AboutPage(props){
   
    //let {
   location} = props;
    //console.log("location对象",location);
    return (
      <h1