CODEWITHSUNDEEP
react-routerreact-router-dom
Thuan Nguyen
Thuan Nguyen

Reputation: 501

react Browser URL changed but useLocation hook doesn't get update

I am creating a dashboard using nested routes. But when I tries clicking a Link, the URL on the browser does change but the useLocation hook doesn't get update so my useEffect hook doesn't get fired to reload data.

This is my App main routes:

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>
  );
}

And this is my dashboard:

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>
  )
}

Upvotes: 3

Views: 1845

Answers (1)

Thuan Nguyen
Thuan Nguyen

Reputation: 501

I have found the error. It is because I use 2 Router in the same application (1 in the App.js and 1 in Dashboard.js). There should be only 1 router in an application. Remove Router from dashboard makes it work.

Upvotes: 2

Related Questions