Как перенаправить без мерцания в React с помощью React Router?

Question

Я строю SPA с React, используя React Router, и столкнулся с этой концептуальной проблемой.

Итак, это мой компонент приложения, в котором есть 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

У меня была такая же проблема, и я нашел решение в следующем посте: Программно перемещаться с использованием реагирующего маршрутизатора .

Заменить 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>

Читать все об этом здесь