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

Are you really using BrowserRouter? But, what I see is HashRouter. — Ukasha, Jul 22 '18 at 02:09

Dez · Accepted Answer · 2018-07-22T09:25:17.047

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.

Thank you so much! I was wondering why it wasn't working as intended. I ended up putting it inside the
of my BrowserRouter and it worked out find. react-router no longer uses hash thought correct? — drewkiimon, Jul 22 '18 at 20:41
Yes, they still have the option to use [HashRouter](https://reacttraining.com/react-router/web/api/HashRouter) but you have to remember it doesn't connect well with the browser history. — Dez, Jul 22 '18 at 21:40
This was the key for me: ```Note that I put the NavBar component inside the div because BrowserRouter only allows to have a single child.``` — site, Jun 07 '20 at 01:25

score 4 · Answer 2 · answered Mar 15 '20 at 08:59

4

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.

answered Mar 15 '20 at 08:59

Mehmet Ataş

11,081
6
51
78

score 1 · Answer 3 · answered Nov 24 '20 at 20:39

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.

score 1 · Answer 4 · answered Feb 20 '21 at 14:14

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.

This following isn't a fix, but I'd recommend trying out NextJS. Makes routing a lot more simple. — drewkiimon, Feb 20 '21 at 17:30
Agreed. I just thought whoever is searching for "url updating, but view isn't" might see this and hopefully it helps if they made the same mistake I did. — tkit, Feb 20 '21 at 17:40

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

4 Answers4

Linked