my page is not rendering with different id on the same page when i use link in react components

user_18157952 0
Viewed 239

///my link

<Link
      className="collection__link"
      key={movie.id}
      to={`/movie/${
        movie.title || movie.original_title || movie.original_name
      }`}
    >
      <MovieData movie={movie} />
    </Link>

///routes

 <Router>
    <Routes>
      <Route exact path="/" element={<Home />} />
      <Route exact path="/movie/:id" element={<Movie />} />
      <Route
        exact
        path="/genre/:movie/:genreaId"
        element={<MovieGenre />}
      />
    </Routes>
  </Router>

///I want to render same page page with different params everything works fine except when when i am on the same page i am unable to do it

react-router reactjs parameters hyperlink
1 Answers

Use the useParams and useEffect hooks to use the id param as a dependency to run any logic when a new movie is selected.

Example:

const { id } = useParams();

useEffect(() => {
  // logic to run when id value changes
}, [id]);
user_86908570
Related