React URL changes but component does not render

Question

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>

  )
}

score 2 · Answer 1 · answered Jun 19 '22 at 02:00

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 react-router-dom@5.1 npm uninstall -s react-router-dom

2.Install React-router-dom: Version: 5.3.3 npm install -s react-router-dom@5.3.3

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

score 1 · Accepted Answer · answered Jun 19 '22 at 00:19

1

Try using Routes instead of switch.

import Routes

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

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

answered Jun 19 '22 at 00:19

Timileyin

126
2

It does not work :/ . ERROR export 'Routes' (imported as 'Routes') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Prompt, Redirect, Route, Router, StaticRouter, Switch, __RouterContext, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter) – John Jun 19 '22 at 00:23
1

update to v6, it should work – Timileyin Jun 19 '22 at 00:24

React URL changes but component does not render

2 Answers2