How do I make react router v6 load elements without having to manualy refresh the url?

user_12210470 0
Viewed 3749

When I send the user to a URL (in this case /login and /signup and then back to /) the elements on my page don't load automatically by entering the URL, I instead have to manually refresh in order for the content to load.

This is my index.js which handles the routes (with react router v6)

import Navbar from "./components/navbar/navbar";
import Footer from "./components/footer/footer";

import Home from "./pages/home/home";
import Login from "./pages/user/login/login";
import Signup from "./pages/user/signup/signup";

ReactDOM.render(
<div>
<Navbar />
<BrowserRouter>
 <Routes>
<Route index path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
 <Route path="/signup" element={<Signup />} />
 </Routes>
</BrowserRouter>
  <Footer />
  </div>,
  document.getElementById("root")
);

This is an example of what happens when I send the user to /login with the use of the Link component that I am importing through React-router. Before refreshing the URL on /login

I then have to manually reload the page by pressing the reload button, only after doing so the content will load. After refreshing the URL on /login

the same applies if I try to go back to the homepage using the Link component Before refreshing on the URL /

I then have to reload in order to remove the login box After refreshing on the URL /

react-router-dom react-router reactjs javascript
2 Answers

I reproduced the same behavior. CodeSandbox (try it and look at home.js)

You don't seem to be using the page navigation correctly. The most react way is to use the useNavigation() hook.

user_102788250

If navigation is working but the routes aren't then I suspect you are rendering them into separate routers. I notice you render the Navbar outside your BrowserRouter, and since navigation is working and updating the URL in the address bar is fairly safe to assume those links are correctly wrapped in a router. You'd see an invariant warning/error otherwise.

ReactDOM.render(
  <div>
    <Navbar /> // <-- must have another router if it is working
    <BrowserRouter>
      <Routes>
        <Route index path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </BrowserRouter>
    <Footer />
  </div>,
  document.getElementById("root")
);

You should have only one router wrapping the app and providing the routing context to all Routes, Route, Navigate, Link, etc... components.

Remove any extraneous routers in other components, like NavBar, and move them all to be within the BrowserRouter you are rendering here.

ReactDOM.render(
  <BrowserRouter>
    <Navbar />
    <Routes>
      <Route index path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<Signup />} />
    </Routes>
    <Footer />
  </BrowserRouter>,
  document.getElementById("root")
);
user_86908570
Related