2

the code goes as below,

    import './App.css';
    import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
    import Home from './Pages/Home';
    import About from './Pages/About';
    import Notfound from './Pages/Notfound';
    
    function App() {
      return (
        <Router>
          <div className="App">
            <nav>
              <ul>
                  <li><Link to="/" >Home</Link></li>
                  <li><Link to="/about">About</Link></li>                          
              </ul>
          </nav>
            <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/about' component={About} />
              <Route component={Notfound} />
            </Switch>
          </div>
        </Router>
      );
    }
    export default App;
Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
Raj Das
  • 31
  • 3
  • Does this answer your question? [Link tag inside BrowserRouter changes only the URL, but doesn't render the component](https://stackoverflow.com/questions/71832720/link-tag-inside-browserrouter-changes-only-the-url-but-doesnt-render-the-compo) – Drew Reese Apr 18 '22 at 15:47
  • I have issue with my dependencies.After updating to react-router-dom@6 , my problem got resolved. While using version--@6 of react-router-dom, I just changed Switch with Routes. – Raj Das Apr 20 '22 at 13:17

1 Answers1

0

Few things needs to be fixed,

  1. Route should be defined inside Routes.
<Routes>
  <Route ... />
  ...
  ...
</Routes>
  1. Latest react-router-dom API has changed Route accepts component in the element prop not component.
<Route exact path="/" element={<Home />} />

Dependency versions

    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-router-dom": "6.3.0",
    "react-scripts": "4.0.0"

Edit cranky-goldberg-x06efn

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43