React Router Changes URL, but BrowserRouter doesn't change Viewed Component

Question

The project I am working on is kinda of sensitive, but here's what I have that I can show you all.

When I click on one of the s in my NavBar, it changes the URL, but it does not change the view to the proper component. Does anyone have any idea why? If there's a better way I can phrase this or improve the quality of my questin, let me know.

My render that I return

<NavBar />
<BrowserRouter>
  <div>
    <Switch>
      <Route path="/propertytypes" component={PropertyTypes} />
      <Route path="/entitytypes" component={EntityTypes} />
      <Route path="/associationtypes" component={AssociationTypes} />
      <Route path={Routes.ROOT} component={Test} />
    </Switch>
  </div>
</BrowserRouter>

My NavBar

import React, { Component } from "react";
import { Link } from "react-router-dom";

class NavBar extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/propertytypes">Props!</Link>
          </li>
          <li>
            <Link to="/entitytypes">Ent!</Link>
          </li>
          <li>
            <Link to="/associationtypes">Ass!</Link>
          </li>
        </ul>
      </div>
    );
  }
}

export default NavBar;

After clicking Props link

Answer 1

Besides what @Ukasyah noticed about disparity between the Router you are using (you say you are using BrowserRouter ) and the screen captures with the URL you are getting (that points out you are using HashRouter ), you must be getting a problem with the code you are showing up because the <Link> component in order to work must be contained inside the BrowserRouter . In your browser console it must be happening this error:

Warning: Failed context type: The context router is marked as required in Link , but its value is undefined .

So to avoid the problem and links start to work, your render should be something like this:

<BrowserRouter>
  <div>
    <NavBar />
    <Switch>
      <Route path="/propertytypes" component={PropertyTypes} />
      <Route path="/entitytypes" component={EntityTypes} />
      <Route path="/associationtypes" component={AssociationTypes} />
      <Route path={Routes.ROOT} component={Test} />
    </Switch>
  </div>
</BrowserRouter>

Note that I put the NavBar component inside the div because BrowserRouter only allows to have a single child.

Answer 2

I have been looking at different SO questions to solve this issue and none of them helped. My problem was using BrowserRouter in multiple different components. Same as here .

Answer 3

For me, the issue was that my entire app was wrapped with a <Router> , because that was how the boilerplate code was set up. Then I was copying snips from BrowserRouter docs, and did not remove the <BrowserRouter> wrapper around the code. Nested routers won't work properly.

Answer 4

The mistake I made was, I started with the setup from the documentation, which involves using:

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

Then I started splitting everything into separate layout files like this . So I initially copied the whole import between multiple files. At some point I was cleaning up the code and realized I only needed to import the Switch but I foolishly forgot to remove the BrowserRouter as , and I ended up with:

import { BrowserRouter as Switch } from "react-router-dom";

Which is obviously wrong since it mapped BrowserRouter to Switch, you can't have nested BrowserRouter 's and that's what introduced the issue in my case.