If I go to "/" or "/details" with Reloading the page manually in browser everything renders fine.

If I go to "/" or "/details" with navbar links the URL changes but the content does not renders.

I tried using "exact" keyword at "/details" route , but it is the same .

React-router-dom: Version: 5.1

App.js:

import { BrowserRouter , Redirect, Route , Switch } from 'react-router-dom';
import './App.css';
import Navbar from './Navbar.js'
import Home from './pages/Home'
import Details from './pages/Details';


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route exact path="/" >
            <Home />
          </Route>
          <Route path="/details" >
            <Details />
          </Route>
          <Route path="*">
            <Redirect to="/" />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Navbar:

import './Navbar.css'
import { NavLink , Link } from 'react-router-dom'
export default function Navbar() {


  return (

        <header >
            <ul >
                <li><Link to="/">Home</Link></li>
                <li><Link to="/details">Details</Link></li>
                <li><a href="https://www.google.com">Google</a></li>
            </ul>
        </header>

  )
}

CodePudding user response：

Try using Routes instead of switch.

1. import Routes

import { BrowserRouter , Redirect, Route , Routes, Switch } from 'react-router-dom';

2. Change the Switch to *Routes

        <Routes>
          <Route exact path="/" >
            <Home />
          </Route>
          <Route path="/details" >
            <Details />
          </Route>
          <Route path="*">
            <Redirect to="/" />
          </Route>
        </Routes>

I hope this helps

CodePudding user response：

Upgrade to React-router-dom: Version: 5.3.3 because Version: 5.1 has bug.

1.Uninstall whatever version you are having npm uninstall -s [email protected] npm uninstall -s react-router-dom

2.Install React-router-dom: Version: 5.3.3 npm install -s [email protected]

Or go to this post: Click Me to go to Post