React Router v6 Link 组件未更改根页面 url

Question

我在 Post 上创建了一个 Link link 到 Post Page。当 link 与 url 在 '/' 处单击时，link 无法正常工作，它会在 url 中显示正确的 link例如http://localhost:3000/posts/624a771b42211849eaada885 但是页面没有重定向，唯一有效的方法是刷新页面。但是，如果我在 Popular Posts 页面上，link 可以正常工作。需要明确的是，Post 位于名为 Posts 的组件中，该组件显示所有 Posts。 Posts组件是一个跨多个组件的共享组件，例如主页（'/'）和热门Posts（/popular）link作品除了 '/'

以外的所有其他页面

下面是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>
  )
}

Answer 1

据我所知，你的 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 不会呈现，因此 none 的嵌套路由是可匹配的。

您似乎希望 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>

有关详细信息，请参阅：

React Router v6 Link 组件未更改根页面 url

React Router v6 Link component not changing the page at root url

javascript

reactjs

url

hyperlink

react-router