выполнить изменение маршрута из компонента братьев и сестер в React Router V4

Question

Я изучаю React.js. Я использую React Router версии 4.3.1 и React router dom 4.3.1.

Моя текущая структура приложения приведена ниже.

<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>

в моем компоненте контента я настроил Маршрутизатор, как указано ниже.

<BrowserRouter> 
  <React.Fragment> 
  <Route exact path="/phoenix/public" component={Login} /> 
  <ProtectedRoute exact path="/phoenix/public/sample" component={SamplePage} /> 
  <ProtectedRoute exact path="/phoenix/public/view_ticket" component={ViewTicket} /> 
  <ProtectedRoute exact path="/phoenix/public/create_ticket" component={CreateTicket} /> 
  <ProtectedRoute exact path="/phoenix/public/dashboard" component={Dashborad} /> 
  </React.Fragment> 
</BrowserRouter>

Здесь ProtectedRoute - это функциональный компонент, который проверяет, прошел ли пользователь аутентификацию, и возвращает Маршрут

.

На моей боковой панели есть теги a , как показано ниже.

<li> 
  <a href="dashboard"> 
  <i className="ti-panel" /> 
  <p>Dashboard</p> 
  </a> 
</li>

Моя цель - переходить по разным маршрутам без обновления страницы при нажатии на боковой панели. Но нажатие href перезагружает страницу, и все мое состояние в моих обновлениях Mobx обновляется. Я попытался Redirect , но не смог получить Маршрутизатор, который указан в компоненте «братья и сестры» (содержимое - это братья и сестры боковой панели). Я понятия не имею, как этого добиться.

Answer 1

Я исправил свою проблему с помощью BrowserRouter, как показано ниже, как предложено @ PreDinnerSnack.

<BrowserRouter>
<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>
</BrowserRouter>

Затем я использовал Navlink в компоненте My Sidebar. Что решило проблему перехода на нужный маршрут без обновления страницы. Но потом я столкнулся с другой проблемой, поскольку содержимое не обновлялось в соответствии с маршрутом.

Для этой проблемы я обнаружил, что HOC наблюдателя Mobx вмешивался в мой маршрутизатор. Мне пришлось обернуть мой контент с помощью withRouter, как показано ниже, чтобы решить эту проблему.

withRouter(observer(Content));

Я надеюсь, что мое решение кому-нибудь пригодится, поскольку я не нашел учебника с примерами реализации React Router, как у меня в Интернете.

Answer 2

Как указано в комментариях к вашему вопросу, обычные теги <a> не будут работать, и обновите страницу.Поэтому вам нужно будет использовать Link или NavLink.

Если вы хотите, чтобы он работал на боковой панели (дочерний компонент), вам нужно обернуть <BrowserRouter> вокруг всех компонентов, гдеВы хотите использовать маршруты.

Например, вот так (используя ваш код):

<BrowserRouter>
<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>
</BrowserRouter>

И ваша боковая панель будет выглядеть примерно так:

<React.Fragment>
    <Link to="/dashboard">Dashboard</Link> 
    ...
</React.Fragment>

Тогда в вашем компоненте контента.Вам необходимо удалить <BrowserRouter>