反应浏览器 URL 已更改，但使用位置钩子未获得更新

Question

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

这是我的应用程序主要路线：

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个路由器(App.js中有1个，Dashboard.js中只有1个(。从面板中删除路由器使其工作。