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!
2
Answers
finaly I've found the problem! this happened becauese in < CourseDetails /> compponent i should used useEffect() to monitor useParams() changes!
CourseDetais.tsx
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:
Working demo