ReactJS переходы по ссылкам (замена контента)

343

17 октября 2017, 04:58

Доброго времени суток!
Начал изучать reacrjs, и сразу же столкнулся с проблемкой
Например имеется сайт, скажем большой сайт с beckend'ом, где куча разных ссылок, при переходе по ссылкам кардинально изменяется вид.
Что я имею виду, например сайт с фильмами, на главной странице выводится список фильмов, при клике на фильм (пропадает список) и появляется информация о фильме
Вот тут и вопрос, как такое делают в ReactJS?
Если бы я такое делал например с помощью jQuery, это выглядело бы примерно так

$("#content").html("И тут html который получил с сервера");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="menu">тут менюшка<div> 
<div id="content">тут сам контент<div>

А вот как такое сделать на reactjs даже предположить не могу

Answer 1

Есть библиотека, которая называется react-router, она позволяет это делать. В ней есть компоненты типа Router, Route, Link и прочие, с их помощью можно сделать одностраничное приложение с навигацией на клиенте.

Т.е. в нем определенному маршруту соответствует определенный набор компонентов.

  <BrowserRouter>
    <App>
      <Route exact path="/" render={ () => (
        <Redirect to="/heroes" />
      ) } />
      <Route exact path="/heroes" component={ Heroes } />
      <Route exact path="/details/hero/:id" component={ EditHeroContainer } />
    </App>        
  </BrowserRouter>