tag from React Router Dom V6 not working as expected

Question

I'm trying to create a header with links to their respective componenets. Using the a tag to redirect to a component works fine.

The Routes also work properly when the URL is changed manually by me. But when I use the Link tag to redirect it breaks the site and renders a blank page. Take a look at my code below...

App.js

<Router>
      <Routes>
        <Route path="/" exact element={<Hero />}></Route>
        <Route path="experience" element={<Experience />}></Route>
        <Route path="photos" element={<Photography />}></Route>
      </Routes>
</Router>

Header.js

 <nav>
   <ul>
      <li>
         <Link to="/">Home</Link> // using Link renders blank page
      </li>
      <li>
         <Link to="/experience">Experience</Link> // using Link renders blank page
     </li>
      <li>
        <a href="/photos">Photography</a> // works fine
      </li>
   </ul>
 </nav>

I don't even need to click the Link for the site to break, it automatically renders a blank page when the Link tag is used.

Please let me know where I'm going wrong

the routing works well but the Links aren't. Adding the"/" before the path also makes no difference — Daniel Syles Immanuel, Apr 19 '22 at 10:27
Could you please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — TheTisiboth, Apr 19 '22 at 10:28
"it automatically renders a blank page" - this is usually because of a major Javascript error in the application (particularly one encountered while React is rendering). Did you check the browser console? — Robin Zigmond, Apr 19 '22 at 10:33
stupid question perhaps, but I feel I need to ask: you did import the Link component in the module where you're using it, right? — Robin Zigmond, Apr 19 '22 at 10:34
@RobinZigmond Thank you! I found what was causing the issue and fixed it. — Daniel Syles Immanuel, Apr 19 '22 at 10:52

score 0 · Accepted Answer · answered Apr 19 '22 at 11:03

So, basically the issue was that I'd used the Link tag outside the React Router Context. That was breaking the website.

App.js (Before)

function App() {
 return (
 <Layout>
  <div className="App">
    <Router>
      <Routes>
        <Route path="/" exact element={<Hero />}></Route>
        <Route path="experience" element={<Experience />}></Route>
        <Route path="photos" element={<Photography />}></Route>
        <Route
          path="*"
          element={
            <main style={{ padding: "1rem" }}>
              <p>There's nothing here!</p>
            </main>
          }
        />
      </Routes>
    </Router>
  </div>
</Layout>
);
}

App.js (After)

function App() {
 return (
 <div className="App">
  <Router>
    <Layout>
      <Routes>
        <Route path="/" exact element={<Hero />}></Route>
        <Route path="experience" element={<Experience />}></Route>
        <Route path="photos" element={<Photography />}></Route>
        <Route
          path="*"
          element={
            <main style={{ padding: "1rem" }}>
              <p>There's nothing here!</p>
            </main>
          }
        />
      </Routes>
    </Layout>
  </Router>
</div>
);
}

You can find some more deatils realted to this issue here

score 0 · Answer 2 · answered Apr 19 '22 at 11:13

0

The Header component is outside of the Router context, That seems to be the problem.

answered Apr 19 '22 at 11:13

Ahmed Toyib Olamide

1

tag from React Router Dom V6 not working as expected

2 Answers2