2
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "5.2.0",

This is my App.js file

import React from "react"
import Navbar from "./components/Navbar"
import Main from "./components/Main"
import Details from "./components/Details"

import { BrowserRouter as Switch, Router, Route, Link } from "react-router-dom"


export default function App() {
    return (
        <Router>
            <div className="container">
                <header>
                <ul>
                    <li><Link to="/navbar">Navbar</Link></li>
                    <li><Link to="/main">Home</Link></li>
                    <li><Link to="/details">Details</Link></li>
                </ul>

                <div>
                    <Switch>
                        <Route exact path="/navbar" component={Navbar} />
                        <Route exact path="/main" component={Main}/>
                        <Route exact path="/details" component={Details}/>
                    </Switch>
                </div>
                </header>
            </div>

        </Router>
    )
}
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Roshni Patel
  • 21
  • 1
  • 5
  • Are you ***certain*** you have v5 of `react-router-dom` installed? From your project directory please run `npm list react-router-dom` and report back the installed version. – Drew Reese Jan 13 '22 at 16:51

1 Answers1

2

Just glancing at only the code you've shared, you've mucked up your imports a bit.

import { BrowserRouter as Switch, Router, Route, Link } from "react-router-dom";

You've imported the BrowserRouter as Switch. I'm certain you meant to import it as Router, and to import the Switch separately.

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

The issue is that you were rendering two routers, and they don't share the routing context they provide. In other words, the "Router" was handling the navigation from the links, but the Route components were getting their routing context from the nested BrowserRouter a.k.a. "Switch".

If this doesn't resolve your issue completely then there may be more relevant code we need to look at. Try the above first though to get your App component into proper working order.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Thank you for the response! I tried it but then got new error of Switch not exported from 'react-router-dom'. Then I read the documentation that said that for newer versions Switch has been replaced with 'Routes' I tried replacing Switch with Routes and it worked! Thanks for the help! :) – Roshni Patel Jan 13 '22 at 19:30
  • @RoshniPatel Ah, sounds like you've managed to update/upgrade to `react-router-dom` v6 (*see my comment above regarding checking the installed version*). Yes, in RRDv6 change all `Switch` components to `Routes`, and ensure any `Route` components use the `element` prop to render the routed components, i.e. `} />`. Check the [v5 migration guide](https://reactrouter.com/docs/en/v6/upgrading/v5) for anything else you may need to address. Cheers and good luck! – Drew Reese Jan 13 '22 at 19:36
  • 1
    Yeah! That's right. I will check the documentation. Thank you for all the help!! :) – Roshni Patel Jan 13 '22 at 20:29