Как использовать маршрут между тремя компонентами?
У меня есть приложение, разработанное как: App.js, содержащий два маршрута:
- Войти Зарегистрироваться
- Домашняя страница.
Домашняя страница имеет макет как: Заголовок Боковая панель КонтентАреа
Компонент заголовка и боковой панели импортируются в дом.
Теперь я хочу, чтобы, когда я щелкаю любую запись боковой панели, я хочу, чтобы ее содержимое загружалось в раздел области содержимого.
Я пробовал использовать ссылку реагирующего маршрутизатора на боковой панели, а затем перенаправить на домашнюю страницу со ссылкой на каждую страницу меню или компоненты, но это не сработало.
Это мой App.js
function App() {
return (
<div className = "App">
<Routes>
<Route path = "/" element = {<LoginSignup />} />
<Route path = "/home" element = {<Home />} />
</Routes>
</div>
);
}
Это мой заголовок:
const Header = () => {
return (
<div className='header-container'>
<div className='header-wrapper'>
<div className='header-content'>
<div className='intro-bar'>
<h3>SideMenu Name</h3>
<h2>Welcome, User!</h2>
</div>
<hr></hr>
</div>
</div>
</div>
)
}
Это моя боковая панель:
const Sidebar = () => {
const handleLogout = () => {
navigate('/');
}
return (
<div className='sidebar-content-menu'>
<ul className='menu-list'>
<div>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</div>
<div>
<li onClick = {handleLogout}>Logout</li>
</div>
</ul>
</div>
)
}
А это мой дом:
const Home = () => {
const navigate = useNavigate();
const handleLogout = () => {
navigate('/');
}
return (
<div className='home-container'>
<div className='home-wrapper'>
<div className='home-content'>
<div className='home-content-side-menu-holder'>
<h1>ZERO</h1>
<div className='sidebar-content-menu'>
<Sidebar />
</div>
</div>
<div className='home-content-menu-content-section'>
<Header />
<div className='side-menu-content-section'>
<div className='side-menu-content-viewer'>
//i want my sidemenu links page to be displayed here.
</div>
</div>
</div>
</div>
</div>
</div>
)
}
На данный момент я удалил
<Routes>
<Route path = "/home/item1" element = {<Item1 />} />
<Route path = "/home/item2" element = {<Item2 />} />
<Route path = "/home/item3" element = {<Item3 />} />
</Routes>
из боковой панели, что привело к ошибкам.
Я вернулся, чтобы отреагировать примерно через год. поэтому дом реагирующего маршрутизатора должен быть последней версии. сейчас не могу проверить, так как я на улице. и моя домашняя страница имеет заголовок и боковую панель из двух компонентов, а также целый широкий раздел для просмотра контента. Я установил vscode заново, поэтому все должно быть последней стабильной версии.
Мы не можем решать проблемы в коде, который не видим, поэтому, пожалуйста, отредактируйте сообщение, включив в него полный и релевантный минимально воспроизводимый пример.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема
Проблема в том, что компонент Home отображается на пути маршрута, который не позволяет отображать дочерние маршруты.
Решение
Использование нисходящих маршрутов
Добавьте подстановочный знак "*" в конец пути к домашней странице, чтобы дочерние маршруты также можно было сопоставлять и отображать.
Пример:
Приложение
export default function App() {
return (
<div className = "App">
<Routes>
<Route path = "/" element = {<LoginSignup />} />
<Route path = "/home/*" element = {<Home />} />
</Routes>
</div>
);
}
Дочерние маршруты строятся относительно родительского маршрута, поэтому удалите «префикс» "/home" на дочерних маршрутах.
Дом
const Home = () => {
const navigate = useNavigate();
const handleLogout = () => {
navigate("/");
};
return (
<div className = "home-container">
<div className = "home-wrapper">
<div className = "home-content">
<div className = "home-content-side-menu-holder">
<h1>ZERO</h1>
<div className = "sidebar-content-menu">
<Sidebar />
</div>
</div>
<div className = "home-content-menu-content-section">
<Header />
<div className = "side-menu-content-section">
<div className = "side-menu-content-viewer">
<Routes>
<Route path = "/item1" element = {<Item1 />} />
<Route path = "/item2" element = {<Item2 />} />
<Route path = "/item3" element = {<Item3 />} />
</Routes>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
Использование вложенных маршрутов
Другой способ — отрисовать Outlet там, где вы хотите, чтобы маршруты боковой панели отображались, и визуализировать их как вложенные маршруты под "/home".
Приложение
export default function App() {
return (
<div className = "App">
<Routes>
<Route path = "/" element = {<LoginSignup />} />
<Route path = "/home" element = {<Home />}>
<Route path = "item1" element = {<Item1 />} />
<Route path = "item2" element = {<Item2 />} />
<Route path = "item3" element = {<Item3 />} />
</Route>
</Routes>
</div>
);
}
Дом
import { Outlet } from 'react-router-dom';
const Home = () => {
const navigate = useNavigate();
const handleLogout = () => {
navigate("/");
};
return (
<div className = "home-container">
<div className = "home-wrapper">
<div className = "home-content">
<div className = "home-content-side-menu-holder">
<h1>ZERO</h1>
<div className = "sidebar-content-menu">
<Sidebar />
</div>
</div>
<div className = "home-content-menu-content-section">
<Header />
<div className = "side-menu-content-section">
<div className = "side-menu-content-viewer">
<Outlet />
</div>
</div>
</div>
</div>
</div>
</div>
);
};
Не могли бы вы уточнить, какую версию
react-routerвы используете? И когда вы говорите, что «HomePage имеет макет как: ContentArea боковой панели заголовка», вы просто имеете в виду, что у вас есть компонент HomePage с этими тремя дочерними компонентами? Не могли бы вы опубликовать код того, как вы сейчас настроили маршруты?