react-router在hash模式下如何销毁部分已经push的路由

Question

react-router在hash模式下

我现在从第一个页面push到了第五个页面, 然后我现在想跳回第一个页面的同时, 将第二到第五个页面的路由全部销毁, 让用户无法点击前进按钮向前跳转, 这样的话需要怎么销毁呢?

Answer 1

// jsx 模式

<Redirect to="/somewhere/else" />

// event 模式

import React from 'react'
import { Redirect } from 'react-router-dom'class MyComponent extends React.Component { state = {
    redirect: false
  } setRedirect = () => {
    this.setState({
      redirect: true
    })
  } renderRedirect = () => {
    if (this.state.redirect) {
      return <Redirect to='/target' />
    }
  } render () {
    return (
       <div>
        {this.renderRedirect()}
        <button onClick={this.setRedirect}>Redirect</button>
       </div>
    )
  }}