Question

我正在使用嵌套路由创建仪表板。但是当我尝试单击链接时，浏览器上的 URL 确实发生了变化，但 useLocation 钩子没有更新，因此我的 useEffect 钩子不会被触发以重新加载数据。

这是我的App主要路线：

function App() {

  return (
    <Router>
      <Header />
      <Switch>
        <Route path="/login" component={ Login } />
        <ProrectedRoute exact path="/" component={ Home } />
        <ProrectedRoute path="/blogs/:title" component={ BlogPage } />
        <ProrectedRoute path="/new" component={ NewBlog } />
        <ProrectedRoute path="/dashboard/:part" component={ UserDashboard } />
        <ProrectedRoute path="/:name" component={ ProfilePage } />
      </Switch>
      <Footer />
    </Router>
  );
}

这是我的仪表板：

export const UserDashboard = () => {
  const dispatch = useDispatch();
  const location = useLocation();
  
  useEffect(() => {
    switch(location) {
      case '/dashboard/posts': 
        dispatch(getOwnPosts());
        break;
      case '/dashboard/bookmarks':
        dispatch(getBookmarkPosts());
        break;
      case '/dashboard/followings':
        break;
      default: 
        break;
    };
  }, [location]);

  return (
    <div className="dashboard">
      <Router>
        <div className="dashboard__sidebar">
          <Link to="/dashboard/posts">Your posts</Link>
          <Link to="/dashboard/bookmarks">Your bookmarks</Link>
          <Link to="/dashboard/followings">Your followings</Link>
        </div>
        <div className="dashboard__main">
          <Switch>
            <Route exact path="/dashboard/posts">
              <BlogRecommendationList selector={selectUserPosts} />
            </Route>
            <Route exact path="/dashboard/bookmarks">
              <BlogRecommendationList selector={selectUserBookmarkedPosts} />
            </Route>
          </Switch>
        </div>
      </Router>
    </div>
  )
}

Answer 1

我发现了错误。这是因为我在同一个应用程序中使用了 2 个路由器（1 个在 App.js 中，1 个在 Dashboard.js 中）。一个应用程序中应该只有 1 个路由器。从仪表板中删除路由器使其工作。

反应浏览器 URL 已更改但 useLocation 挂钩未更新

1 个答案: