如何使用 React Router 重定向而不在 React 中闪烁？答案

【问题标题】：How to redirect without flickering in React using React Router?如何使用 React Router 重定向而不在 React 中闪烁？
【发布时间】：2019-06-16 18:38:45
【问题描述】：

我正在使用 React Router 构建一个带有 React 的 SPA，并遇到了这个概念问题。

所以，这是我的 App 组件，它有一个 React 路由器。

class App extends Component {
  render(){
    return(
      <div className="appwrap">
        <Jumbotron></Jumbotron>
        <Navbar></Navbar>
        <Router>
          <Route exact path="/" component={Display}></Route>
          <Route exact path="/saved" component={Saved}></Route>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

在我的导航栏组件中有几个简单的函数重定向到 href，这显然会导致页面“闪烁”和刷新。这就是我想要摆脱的（闪烁）。我的导航栏组件就在这里。

class Navbar extends Component {
  redirectToSearch = () => {
    window.location.href = '/'; 
  }
  redirectToSaved = () => {
    window.location.href = '/saved'; 
  }
  render(){
    return (
      <div className="navbar">
          <div className="navbaropt" onClick={this.redirectToSearch.bind(this)}>search</div>
          <div className="navbaropt" onClick={this.redirectToSaved.bind(this)}>saved</div>
      </div>
    );}
}

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我遇到了同样的问题，并在以下帖子中找到了解决方案：Programmatically navigate using react router。

将window.location.href 替换为this.props.navigation.push

将你的函数更新到下面

redirectToSearch = () => this.props.navigation.push('/');

redirectToSaved = () => this.props.navigation.push('/saved');

【讨论】：

谢谢，这就是我想要的。我不惜一切代价避免使用。

【解决方案2】：

对于使用 React Router 进行页面内导航，您必须使用 Link 元素。

  <div className="navbar">
      <Link to="/">search</Link>
      <Link to="/saved">saved</Link>
  </div>

阅读所有相关信息here

【讨论】：

为什么要避免使用 Link 标签？
我什至无法理解这里发生了什么。您的原始问题中没有任何内容远程表明您不想使用 Link 标签。
另外，您可以通过在构造函数中只绑定一次而不是每次渲染来节省一些周期。但是你甚至不需要绑定，因为你使用的是箭头函数