Выполнить изменение маршрута из компонента братьев и сестер в React Router V4
Я изучаю React.js. Я использую маршрутизатор React версии 4.3.1 и маршрутизатор React 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>
Здесь Защищенный маршрут - это функциональный компонент, который проверяет, аутентифицирован ли пользователь, и возвращает Маршрут.
На моей боковой панели есть несколько тегов а, как показано ниже.
<li>
<a href = "dashboard">
<i className = "ti-panel" />
<p>Dashboard</p>
</a>
</li>
Моя цель - переходить к разным маршрутам без обновления страницы при щелчке на боковой панели. Но нажатие href перезагружает страницу, и все мое состояние в моем Mobx обновляется. Я попытался использовать Перенаправить, но не смог получить маршрутизатор, указанный в компоненте «братья и сестры» (контент - это братья и сестры боковой панели). Понятия не имею, как этого добиться.
Вы пробовали использовать свойства navigationOption?
Я попытался использовать ссылки, но, думаю, ему нужен маршрутизатор, но в моем компоненте боковой панели нет маршрутизатора. Как я могу использовать ссылку в компоненте боковой панели, если мой маршрутизатор настроен в содержимом?
Ответы 2
Как указано в комментариях к вашему вопросу, обычные теги <a> не будут работать и обновят страницу. Поэтому вам нужно будет использовать Ссылка на сайт или 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>
Мне удалось перейти к желаемому маршруту с помощью вашего решения, но содержимое не меняется в соответствии с маршрутом
Есть ли у вас переключатель маршрутов? reacttraining.com/react-router/core/api/Switch
Я исправил свою проблему, установив 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 в компоненте «Моя боковая панель». Что устранило проблему перехода к желаемому маршруту без обновления страницы. Но затем я столкнулся с другой проблемой, поскольку контент не обновлялся в соответствии с маршрутом.
Для этой проблемы я обнаружил, что HOC-обозреватель Mobx мешает моему маршрутизатору. Мне пришлось обернуть мой контент withRouter, как показано ниже, чтобы решить эту проблему.
withRouter(observer(Content));
Я надеюсь, что мое решение пригодится кому-то, так как я не нашел учебника с примерами реализации React Router, подобного моему, в Интернете.
Вы пробовали использовать Ссылка на сайт?