Search code examples
javascriptreactjsreact-routerreact-router-dom

All my links in my react js projects have become unclickable

I am using react v17 and react-router-dom v6 in my project and my Route component use element instead of component. My problem begin when I try to get and show data belong the server and I use useffect hook.

<Routes>
  <Route exact path="/" element={<HomeFour />} />
  <Route path="/articles/:page" element={<Article />} exact />
<Routes>

Example of link

<a
  className="nav-link active"
  id="pills-home-tab"
  data-bs-toggle="pill"
  href="#pills-home"
  role="tab"
  aria-controls="pills-home" 
  aria-selected="true"
>
  Most Popular
</a>

I would like to see my links clickable.

Solution

  • It seems like the issue might be related to the href attribute in your anchor () tags. In React Router v6, the href attribute is not used for navigation within the application. Instead, you should use the to attribute provided by the Link component from react-router-dom.

    To fix the issue, you can replace your anchor tags with the Link component. Here's an example:

    import { Link } from 'react-router-dom';

// ...

<Link
  className="nav-link active"
  id="pills-home-tab"
  to="#pills-home"
  role="tab"
  aria-controls="pills-home" 
  aria-selected="true"
>
  Most Popular
</Link>

    Make sure you have the Link component imported from react-router-dom, and then replace your anchor tags () with the Link component. By doing this, your links should be clickable and properly handle navigation within your React application.

    Additionally, if you have a specific route defined for "/#pills-home", make sure to include it in your Routes component to ensure that the corresponding component is rendered when the link is clicked.