0

Here, I am try to implement Routing concept in my react app. But I am face the issue and issue is URL link change in url section of browser but page content not change. But when I refresh the link then new content rendered.

App.js

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Dashboard1 from './Dashboard1';
import Dashboard2 from './Dashboard2';

function App() {
  return (
    <React.Fragment>
      <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Dashboard1} />
        <Route path="/1" component={Dashboard2} />
      </Switch>
     </BrowserRouter>
    </React.Fragment>
  );
}

export default App;

Dashboard1.js

import React from 'react'
import logo from './logo.svg';
import './App.css';
import { Link } from 'react-router-dom'

function Dashboard1() {
  return (
    <React.Fragment>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
            <br /> Dashboard1
          </p>
          <Link
            className="App-link"
            to="/1"
            rel="noopener noreferrer"
          >
            Go Dashboard2
          </Link>
        </header>
      </div>
    </React.Fragment>
  )
}
export default Dashboard1

Package.json

"dependencies": {
  "@testing-library/jest-dom": "^5.16.4",
  "@testing-library/react": "^13.2.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.1.0",
  "react-dom": "^18.1.0",
  "react-router-dom": "^5.3.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},
Aakash Limbani
  • 147
  • 1
  • 9

1 Answers1

0

This is a well-known problem from React router v5 with React v18. You can check this discussion

You can have 3 options for potential fixes

  • Remove React.StrictMode
  • Migrate all your routes to React router v6
  • Downgrade React to v17
Nick Vu
  • 14,512
  • 4
  • 21
  • 31