How to useNavigate outside Routes

[master117]

Hello, I have a structure like this:

    <>
        <HeaderBar />
        <div style={{ height: "calc(100% - 60px)" }}>
                <Routes>
                    <Route index element={<Navigate to="/optimize" replace />} />
                    <Route path="optimize/swing/:id" element={<SingleSwing />} />
                    <Route path="optimize/storage/:id" element={<SingleStorage />} />
                    <Route path="optimize" element={<MultiView />} />
                    <Route path="review" element={<div>Page 2</div>} />
                </Routes>
        </div>
        <Toasts />
    </>

Now I want to use useNavigate and then call navigate() inside HeaderBar. The URl changes but no reload / actual change is happening.

[master117]

I have figured out the problem. I was Navigating between two pages with the same url but a different parameter

"optimize/swing/1" -> "optimize/swing/2"

This navigation was not possible before. This did not reload the page. Instead I just had to write a useEffect that would reload my data if the id changes.