上节课我们对路由参数的传递来做了一个简单的总结，可以说是很简单了，总结的内容还没有回顾多。这节课呢，我们来讲一讲路由跳转的模式。

回顾

上节课也没有什么好回顾的，记得那三种方法必须都全部熟练掌握。我们也不多废话了，进入这节课的内容吧。

概述

在我介绍路由的使用之前，我们是先来学习了路由的工作原理，其实也就是对浏览器历史记录的操作，push和replace，而且我们也对比过这两种操作。

  • push是压栈，会留下痕迹
  • replace是直接替换掉栈顶的数据

其实我们默认的路由跳转模式都是push模式，也就是说每次路由跳转都会留下痕迹。我们当前看到的页面一定就是栈顶的数据，然后我们有了这个栈中的数据，我们就可以用来执行全部流程的前进后退。

开启replace

那么既然默认是push，那么我们应该怎么开启replace模式呢？我们来看一下我们的页面，侧边栏有一个导航区，Home中也有一个导航区，然后进入到Message中之后，message的列表也是一个导航区，那么我们让message列表来开启replace模式应该怎么处理？

export default class Message extends Component {
  state = {...}
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {messageArr.map(
            msg => <li key={msg.id}>
              <Link replace={true} to={{ 
                  pathname: "/home/message/details", 
                    state: { id: msg.id, title: msg.title } }}>
                {msg.title}
              </Link>
            </li>
          )}
        </ul>
        <Route path="/home/message/details" component={Details} />
      </div>
    );
  }
}

我们来看一下代码，我们并没有做什么复杂的操作，我们来看一下，默认是push模式，那么我们在设置路由链接的时候直接设置replace属性为true那就可以了。

我们来看一下效果：

image-20220117150919599

我们因为加了重定向，刚一打开页面的时候就自动跳转到了/home/news了，那么我们点击Message导航项，然后依次点击message001~003：

image-20220117151051223

到最后面我们展示出来的应该是message003的信息，那么我们现在这个栈里面是不是应该最开始入栈的是/home/news？因为我们直接重定向进来的，然后点了Message，第二入栈的是/home/message，那么这个时候我们开启了replace模式，点击message001~003，那么这个时候栈顶的数据是谁？是不是message003？message001~002还在不在栈里？是不是不在了，因为replace是字节替换掉栈顶数据的。那么我来问大家，/home/message在不在栈中？是不是也不在了？因为我们点击message001的时候就已经是replace模式了啊，所以说/home/message也已经被替换了。那我们现在点击后退的话，是不是就直接回退到了/home/news？那么我们来看一下：

image-20220117151721517

直接会到了/home/news页面

以上便是我们所说的路由的两种跳转模式。

总结

  • 路由跳转有两种模式
  • push模式
  • replace模式

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/push_and_replace/