1

I have used react-router-dom version @5.2.0 in my react application. Whenever I click on the link in navbar(Header.js file), the url in the address bar changes but the page that the link is targeting does not changes. But when I click the refresh button on the browser, the page changes.

I've already seen all the threads on StackOverflow and none of them helped me.

Here are my code files:

App.js

import React from 'react'
import './App.css';
import Header from './Header';
import Home from './Home';
import Checkout from './Checkout';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {

  return (

    <Router>
      <div className="app">
        <Header />
        <Switch>

          <Route path="/checkout" exact>
            <Checkout />
          </Route>
          <Route path="/" exact>
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>


  );
}

export default App;

Header.js

import React from 'react'
import './Header.css'
import SearchIcon from '@mui/icons-material/Search';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { Link } from "react-router-dom";
import { useStateValue } from "./StateProvider";
function Header() {
  const [{ basket }, dispatch] = useStateValue();

  return (
    <div className='header'>
      <Link to="/">
        <img className='header_logo' src="http://pngimg.com/uploads/amazon/amazon_PNG11.png" alt="" />
      </Link>

      <div className="header_search"><input type="text" className='header_searchInput' /><SearchIcon className='header_searchIcon' /></div>
      <div className="header_nav">
        <div className="header_option">
          <span className='header_optionLineOne'>Hello Guest</span>
          <span className='header_optionLineTwo'>Sign In</span>
        </div>
        <div className="header_option">
          <span className='header_optionLineOne'>Returns</span>
          <span className='header_optionLineTwo'>Orders</span>
        </div>
        <div className="header_option">
          <span className='header_optionLineOne'>Your</span>
          <span className='header_optionLineTwo'>Prime</span>
        </div>
        <Link to="/checkout">
          <div className="header_optionBasket">
            <ShoppingCartIcon />
            <span className="header_optionLineTwo header_basketCount">{basket?.length}</span>
          </div>
        </Link>
      </div>
    </div>
  )
}

export default Header
user15947948
  • 11
  • 3

1 Answers1

-1

I suspect you are using react-router v5 with the latest react version. This is a common bug with react-router v5, when using it with react 18. Probably this will not be fixed anymore.

Solution would be either to upgrade to react-router 6 or downgrade your react version to 17.

Cedric Oswald
  • 9
  • 4