[英]React Router v6 Link component not changing the page at root url
I have created a Link
on a Post
that links to the Post Page
.我在链接到
Post Page
的Post
上创建了一个Link
。 When the link is clicked with the url at '/'
the link doesn't work correctly, it displays the correct link in the url eg http://localhost:3000/posts/624a771b42211849eaada885
but the page doesn't redirect, the only way it works is if I refresh the page.当在
'/'
处使用 url 单击链接时,链接无法正常工作,它会在 url 中显示正确的链接,例如http://localhost:3000/posts/624a771b42211849eaada885
但页面不会重定向,唯一它的工作方式是如果我刷新页面。 However, if I am on my Popular Posts
page the link works correctly.但是,如果我在我的
Popular Posts
页面上,该链接可以正常工作。 To be clear the Post is in a component called Posts which displays all of the Posts.需要明确的是,帖子位于一个名为 Posts 的组件中,该组件显示所有帖子。 The Posts component is a shared component across many components, such as Home page (
'/'
) and Popular Posts ( /popular
) the link works in all other pages except for when at '/'
帖子组件是许多组件的共享组件,例如主页 (
'/'
) 和热门帖子 ( /popular
) 该链接在所有其他页面中有效,但在'/'
时除外
Below is the Link
.下面是
Link
。
<Link to={`/posts/${_id}`}>
<h2 className='post-title'>{title}</h2>
</Link>
My routes are set up with the following:我的路线设置如下:
<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>
In my Navbar I have:在我的导航栏中,我有:
const Navbar = () => {
return(
<>
<nav>
</nav>
<Outlet />
</>
)
}
and finally, in my Home.js I have this:最后,在我的 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>
)
}
From what I can tell of your Home
component with据我所知,您的
Home
组件有
const Home = () => {
return (
<>
<div>content</div>
<div>content</div>
<div className="home-posts-container">
{window.location.pathname === "/" ? <PopularPosts /> : <Outlet />}
</div>
<div>content</div>
</>
);
};
You want to render the PopularPosts
component exactly when the path is "/"
, otherwise you want to render one of the matched nested routes.您希望在路径为
"/"
时准确呈现PopularPosts
组件,否则您希望呈现匹配的嵌套路由之一。
The issue is that with the above implementation the Outlet
isn't rendered when the path changes so none of the nested routes are matchable.问题在于,在上述实现中,当路径更改时不会呈现
Outlet
,因此没有任何嵌套路由是可匹配的。
It appears you want the Home
component to be a layout route, it should render all the div
elements and content, and just the Outlet
.您似乎希望
Home
组件成为布局路线,它应该呈现所有div
元素和内容,并且只呈现Outlet
。 Move the PopularPosts
component into an index route.将
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>
For more information see:有关详细信息,请参阅:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.