Link is not working in react-router-dom in version 5.3.0. Please anyone resolve this issue

Question

'Link' is not working properly. Please any one resolve this issue. I tried so many ways but non of them working. When I clicked on home or about, it doesn't move to other side, I have to reload the side manually.

Header.js

import { Link } from "react-router-dom";
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>

App.js

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
<Router>
    <Header title="My Todos List" />
    <Switch>
      <Route
        exact
        path="/"
        render={() => {
          return (
            <>
              <AddTodo addTodo={addTodo} />
              <Todos todos={todos} onDelete={onDelete} />
            </>
          );
        }}
      ></Route>
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
    <Footer />
  </Router>

Package.json

"name": "todos-list", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" },

I've put an example on sandbox with the same specifications you shared: https://codesandbox.io/s/changing-routes-react-router-dom-5-3-0-vwugjs One thing that I've noticed is that you're using the `Router` is this a reference to `BrowserRouter` or to anything else? — samuel silva, Jun 23 '22 at 20:44
could you edit the question and include your package.json as well? — samuel silva, Jun 24 '22 at 20:25
I edit the question and include the package.json file..Please check — Osama Nisar, Jun 27 '22 at 06:09

score 6 · Accepted Answer · answered Jun 27 '22 at 07:39

This is the main issue I faced in React 18.

You Can solve this problem in 2 ways

1. Move back to REACT version 16 and their react router dom version 5 works just fine

I used to react version 16 to solve this problem go to checkout

2. Upgrade your react router version 6 and use with React 18

Here is the code with react-router-dom version 6 if you want to see this code in action

My suggestion is to move react-router version 6 it's more powerful you can checkout docs.

here Switch replace with Routes.

 export default function App() {
  return (
   <Router>
    <Header title="My Todos List" />
    <Routes>
     <Route
      exact
      path="/"
      element={
        <>
          <h2>todo</h2>
          <p>deleteTodo</p>
        </>
      }
     />
     <Route path="/about" element={<About />} />
    </Routes>
   </Router>
 );
}

Header

Also, use the Nav link for navigation to use the active class feature in react-router dom 6

function Header() {
 return (
  <header>
   <NavLink
    className={({ isActive }) =>
      isActive ? "active nav-link" : "nav-link"
    }
    aria-current="page"
    to="/"
   >
    Home
   </NavLink>
   <NavLink
    className={({ isActive }) =>
      isActive ? "active nav-link" : "nav-link"
    }
    to="/about"
    >
    About
   </NavLink>
  </header>
 );
}

Thankyou so much dear, Now my code is working. I have no words to thanks you .. — Osama Nisar, Jun 29 '22 at 14:30
I am using React-router-dom in Excel add-in development. But when I click on button to navigate, only URL changes, component does not switch. So what should I do — Muhammad Haroon Iqbal, Feb 10 '23 at 13:35
I would recommend updating to React Router Dom v6 with React 18! — Ahsan Ehtesham, Mar 11 '23 at 08:06

Link is not working in react-router-dom in version 5.3.0. Please anyone resolve this issue

1 Answers1