Я создал Link
на Post
, который ссылается на Post Page
. При нажатии на ссылку с URL-адресом '/'
ссылка работает неправильно, она отображает правильную ссылку в URL-адресе, например. http://localhost:3000/posts/624a771b42211849eaada885
но страница не перенаправляется, работает только если я обновляю страницу. Однако, если я нахожусь на своей странице Popular Posts
, ссылка работает правильно. Чтобы было ясно, сообщение находится в компоненте под названием «Сообщения», который отображает все сообщения. Компонент «Сообщения» является общим компонентом для многих компонентов, таких как «Домашняя страница» ('/'
) и «Популярные сообщения» (/popular
).
Ниже '/'
.
<Link to = {`/posts/${_id}`}>
<h2 className='post-title'>{title}</h2>
</Link>
Мои маршруты настроены следующим образом:
<Route element = {!token ? <Navigate replace to='/login' /> : <Navbar />}>
<Route
path='/'
element = {<Home />}
>
<Route
path='/popular'
element = {<Popular />}
/>
<Route
path='/posts/:postId'
element = {<PostPage />}
/>
</ Route>
</Route>
В моем Navbar у меня есть:
const Navbar = () => {
return(
<>
<nav>
</nav>
<Outlet />
</>
)
}
и, наконец, в моем Home.js у меня есть это:
const Home = () => {
return (
<div>content</div>
<div>content</div>
<div className='home-posts-container'>
{window.location.pathname === '/' ? <PopularPosts /> :
<Outlet />}
</div>
<div>content</div>
)
}
отредактировал выше, извините за неполный код, думал, что добавил то, что нужно. Не понимал, что контекст может быть проблемой. Спасибо @DrewReese
Из того, что я могу сказать о вашем компоненте Home
с
const Home = () => {
return (
<>
<div>content</div>
<div>content</div>
<div className = "home-posts-container">
{window.location.pathname === "/" ? <PopularPosts /> : <Outlet />}
</div>
<div>content</div>
</>
);
};
Вы хотите отобразить компонент PopularPosts
точно, когда путь равен "/"
, в противном случае вы хотите отобразить один из совпадающих вложенных маршрутов.
Проблема в том, что в приведенной выше реализации Outlet
не отображается при изменении пути, поэтому ни один из вложенных маршрутов не соответствует.
Похоже, вы хотите, чтобы компонент Home
был маршрутом макета, он должен отображать все элементы div
и содержимое, и просто — Outlet
. Переместите компонент PopularPosts
в индексный маршрут.
const Home = () => {
return (
<>
<div>content</div>
<div>content</div>
<div className = "home-posts-container">
<Outlet />
</div>
<div>content</div>
</>
);
};
...
<Routes>
<Route element = {!token ? <Navigate replace to = "/login" /> : <Navbar />}>
<Route path = "/" element = {<Home />}>
<Route index element = {<PopularPosts />} />
<Route path = "/popular" element = {<Popular />} />
<Route path = "/posts/:postId" element = {<PostPage />} />
</Route>
</Route>
</Routes>
Для получения дополнительной информации см.:
Являются ли компоненты
Navbar
иHome
рендерингомOutlet
компонентов для рендеринга вложенных маршрутов?{window.location.pathname === '/' ? <PopularPosts /> : <Outlet />}
не похоже на то, чем вы хотите заниматься. Можете ли вы опубликовать более полный и воспроизводимый код? stackoverflow.com/help/минимально-воспроизводимый-пример