1

'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" },

Improve this question
6
  • Is the <Header /> rendered inside of the <Router />? Commented Jun 20, 2022 at 19:41
  • Yes <Header /> is rendered inside the <Router /> Commented Jun 23, 2022 at 6:40
  • I've put an example on sandbox with the same specifications you shared: 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? Commented Jun 23, 2022 at 20:44
  • And I import Link in my Header.js file Commented Jun 24, 2022 at 10:27
  • could you edit the question and include your package.json as well? Commented Jun 24, 2022 at 20:25

1 Answer 1

Reset to default
7

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>
 );
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thankyou so much dear, Now my code is working. I have no words to thanks you ..
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
can you share the code or share the code editor link
I would recommend updating to React Router Dom v6 with React 18!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.