我創建了Link一個Post鏈接到Post Page. 當使用鏈接上的 url'/'無法正常作業時單擊鏈接時，它會在 url 中顯示正確的鏈接，例如http://localhost:3000/posts/624a771b42211849eaada885但頁面不會重定向，唯一有效的方法是重繪 頁面。但是，如果我在我的Popular Posts頁面上，則鏈接可以正常作業。需要明確的是，帖子位于一個名為 Posts 的組件中，該組件顯示所有帖子。帖子組件是許多組件之間的共享組件，例如主頁 ( '/') 和熱門帖子 ( /popular) 該鏈接適用于所有其他頁面，但在'/'
下面是Link.
<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>
在我的導航欄中，我有：
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>
)
}
uj5u.com熱心網友回復：
據我所知，你的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>
有關更多資訊，請參閱：
- 布局路線
- 索引路線
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/458943.html
標籤：javascript 反应 网址 超链接 反应路由器
上一篇：在Gatsby中如何識別當前正在呈現的頁面是否為404？
下一篇：避免URL引數操作