React Router Dom Link в другом компоненте
Я новичок в React в целом, поэтому заранее извиняюсь, если есть простое решение.
У меня есть две составляющие:
Панель управления
--Боковая панель (вызывается в панели инструментов)
У меня есть путь, настроенный на панели инструментов, и ссылки на моей боковой панели. Когда я нажимаю ссылку, URL-адрес меняется, но панель инструментов не перерисовывается, поэтому она меняется только при обновлении страницы. Мой вопрос: есть ли способ через реактивный маршрутизатор, с помощью которого я могу настроить свою панель инструментов для повторного рендеринга при нажатии ссылки на боковой панели?
импорт
import { BrowserRouter, Route, Link } from 'react-router-dom';
Компонент приборной панели:
<DashboardSidebar />
<BrowserRouter>
<div>
<Route exact path = "/" component = {DashboardLanding} />
<Route path = "/profile" component = {ViewUsers} />
<Route path = "/project" component = {ViewProjects} />
</div>
</BrowserRouter>
Компонент боковой панели информационной панели
<BrowserRouter>
<Link
to = "/"
className = "nav-link"
onClick = {this.navigation}
>
Link</Link>
<Link
to = "/profile"
className = "nav-link"
onClick = {this.navigation}
>
Link</Link>
<Link
to = "/project"
className = "nav-link"
onClick = {this.navigation}
>
Link</Link>
<BrowserRouter>
Ответы 4
Нет необходимости в другом компоненте SideBar. оберните его div или, возможно, фрагментом.
У вас все еще есть два <BrowserRouter> в вашем коде?
Да, должны ли они оба быть вложены в один и тот же <BrowserRouter>?
Нет, вам нужны только ваши теги <Route> под <BrowserRouter>, а не <Link>, ссылки могут быть где угодно в вашем приложении, поэтому просто удалите <BrowserRouter> вокруг вашего тега <Link> и поместите <div> вместо
Когда я удаляю теги <BrowserRouter> вокруг <Link>, все приложение ломается, и я получаю эту ошибку: You should not use <Link> outside a <Router>
Да, как я уже сказал, немного сложно размещать коды в комментариях, я просто поделюсь с вами сутью
Спасибо за суть, которая была действительно полезной, но возвращает новую ошибку. A <Router> may have only one child element Вот мой компонент панели инструментов: gitlab.mi.hdm-stuttgart.de/eo023/client-management-system/blob/… Компонент боковой панели gitlab.mi.hdm-stuttgart.de/eo023/client-management-system/blob/…
Да, это был мой недостаток, забыл об этом, обновил суть, если <></> этот синтаксис не работает для вас, просто используйте <div> вместо этого
Добро пожаловать, если это помогло вам, пожалуйста, проголосуйте и примите ответ, чтобы помочь другим определить правильный ответ.
Возможно проблема в: последняя строка кода BrowserRouter у вас открытый тег, а не закрытый.
Второе решение может заключаться в том, что попробуйте изменить оболочку BrowserRouter с тегом div.
Извините, первая проблема только из-за того, что я сделал ошибку, копируя и вставляя более аккуратный код! Я также сделал, как @prithweeds предложил ниже, и переместил весь код компонента боковой панели на свою панель инструментов, однако компонент по-прежнему не перерисовывается.
BrowserRouter должен был иметь компонент DashboardboardSidebar внутри него, и все они были заключены в один дочерний элемент.
<BrowserRouter>
<>
<DashboardSidebar />
<div>
<Route exact path = "/" component = {DashboardLanding} />
<Route path = "/profile" component = {ViewUsers} />
<Route path = "/project" component = {ViewProjects} />
</div>
</>
эоан! Вот как я использую эту логику.
import { BrowserRouter as Router } from 'react-router-dom';
function ParentComponent() {
return(
<Router>
<div>
<SomeNavBar />
<SomeFeed />
</div>
</Router>
)
};
export default ParentComponent;
----------------------------------------------------------------------------
import { Link } from 'react-router-dom';
function SomeNavBar(){
return(
<Router>
<div>
<Link to = "/">Home</Link>
<Link to = "/about"></Link>>
</div>
</Router>
)
};
export default SomeNavBar;
----------------------------------------------------------------------------
import { Switch, Route } from 'react-router-dom';
function SomeFeed(){
return(
<Switch>
<Route path = "/" exact>
<PostUpdates />
<SomeOtherPost />
...
</Route>
<Route path = "/about" >
<Welcome />
<Description />
...
</Route>
</Switch>
)
};
export default SomeFeed;
Просто оберните родительский компонент.
Я переместил боковую панель над приборной панелью, как вы предложили, но, к сожалению, компонент по-прежнему не отображается.