Question

我正在使用React Router使用React构建SPA，并且遇到了这个概念性问题。

所以，这是我的App组件，它具有一个React Router。

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

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

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

Answer 1

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

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

将您的功能更新到下面

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

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

Answer 2

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

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

阅读所有相关内容here

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

2 个答案: