Question 72596 in Reactjs Question posted in
The new location for the React Documentation can be found here.

react-router V6.10 "url changes but component does not render!" – Reactjs

Despite checking all the answers already posted on stack overflow, I coudn’t find the solution for my case!

i’ve used element in header component to access other pages. by clicking to this links, url changes but the component doesn’t render!
by refreshing page, the component will render properly.

**this problem only occure on course page which use dynamic url! (on other components like HomePage link works properly and only on course pages this issue exists!)

here’s my codes

App.tsx

const App = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route element={<HomePage />} path="/"></Route>
        <Route element={<CourseCategory />} path="/course-category"></Route>

        {/* the problem occurs on this component */}
        <Route element={<CourseDetails />} path="/course/:courseShortName"></Route>

        <Route element={<Article />} path="/article"></Route>
        <Route element={<LoginPage />} path="/login"></Route>
        <Route element={<RegisterPage />} path="/register"></Route>
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

Header.tsx

<Link to="/course/css" > title </Link>

CourseDetails.tsx

const { courseShortName } = useParams();

{/* this function fetch data to show */}
fetchSelectedCourse({ courseShortName })

The issue: when I click on one of the links (only on course page!), the url changes to the corresponding path but the component doesn’t render. so I have to refresh the page to actually make it appear!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    finaly I've found the problem! this happened becauese in < CourseDetails /> compponent i should used useEffect() to monitor useParams() changes!

    CourseDetais.tsx

        useEffect(() => {
    fetchSelectedCourse(courseShortName);
}, [courseShortName]);

  2. 0

    Your router setup is a bit unorthodox, it may appear to work but it’s not idiomatic which results in the strange behaviours you’re experiencing. Here’s an idiomatic approach to your routing:

    import {
  Routes,
  BrowserRouter,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function Page() {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Page />} path="/">
          <Route element={<HomePage />} path="" />
          <Route element={<CourseCategory />} path="course-category"></Route>
          {/* the problem occurs on this component */}
          <Route element={<CourseDetails />} path="course/:courseShortName" />
          <Route element={<Article />} path="article" />
          <Route element={<LoginPage />} path="login" />
          <Route element={<RegisterPage />} path="register" />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

    Working demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search