Navigation links not working ReactJS Router v6

Question

This code doesn't work. I am using React Router v6

function App() {
  return (
    <>
      <h1>Good</h1>
      <nav>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/contactus">About</Link>
          </li>
          <li>
            <Link to="/aboutus">Users</Link>
          </li>
        </ul>
      </nav>
      <Router>
        <Routes>
          <Route path="/" element={<h1>Harsh</h1>} />
          <Route path="/layout" element={<Layout />} />
          <Route path="/home" element={<Home />} />
          <Route path="contactus" element={<ContactUs />} />
          <Route path="aboutus" element={<AboutUs />} />
        </Routes>
      </Router>
    </>
  );
}

But it starts working when the navigation links are rendered by some other component. I wish not to have a separate component for navigation links...

function App() {
  return (
    <>
/*
Nav links placed in Layout.tsx 
*/
      <Router>
        <Routes>
          <Route path="/" element={<Layout />} />
          <Route path="/home" element={<Home />} />
          <Route path="contactus" element={<ContactUs />} />
          <Route path="aboutus" element={<AboutUs />} />
        </Routes>
      </Router>
    </>
  );
}

https://stackoverflow.com/questions/48640280/you-should-not-use-link-outside-a-router — HDM91, Dec 27 '21 at 06:45

score -1 · Answer 1 · answered Dec 27 '21 at 07:41

At first, all react router dom components are wrapped in the browserRouter component.

This code doesn't work. I am using React Router v6

function App() {
  return (
    <Router>
      <h1>Good</h1>
      <nav>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/contactus">About</Link>
          </li>
          <li>
            <Link to="/aboutus">Users</Link>
          </li>
        </ul>
      </nav>
   
        <Routes>
          <Route path="/" element={<h1>Harsh</h1>} />
          <Route path="/layout" element={<Layout />} />
          <Route path="/home" element={<Home />} />
          <Route path="contactus" element={<ContactUs />} />
          <Route path="aboutus" element={<AboutUs />} />
        </Routes>
    </Router>
  );
}

Same as my question here. Check this out. https://stackoverflow.com/questions/71868736/router-does-not-work-with-link-react-router-dom-6#71868769 — Jplus2, Apr 14 '22 at 09:07

Navigation links not working ReactJS Router v6

1 Answers1