Javascript 如何使用React路由器在React中重定向而不闪烁？

我正在用React路由器建立一个SPA，遇到了这个概念问题

这是我的应用程序组件，它有一个反应路由器

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>
    )
  }
}

类应用程序扩展组件{
render（）{
返回(
)
}
}

在我的导航栏组件中，有几个简单的函数重定向到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>
    );}
}

类导航栏扩展组件{
重定向到搜索=（）=>{
window.location.href='/'；
}
redirectToSaved=（）=>{
window.location.href='/saved'；
}
render（）{
返回(
搜索
保存的
);}
}

使用React Router进行页面内导航时，必须使用

链接

元素

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

搜索
保存的

---

阅读所有相关内容

我也遇到了同样的问题，并在以下帖子中找到了解决方案：

将

window.location.href

替换为

this.props.navigation.push

将你的函数更新到下面

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

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

---

谢谢，这就是我要找的。因为我在不惜一切代价避免。你为什么要避免链接标签？我甚至无法理解这里发生了什么。在您最初的问题中，没有任何远程指示您不希望使用链接标记的内容。此外，您可以通过在构造函数中只绑定一次而不是每次渲染来节省一些周期。但是您甚至不需要绑定，因为您使用的是箭头函数