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 ponent. 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" ponent={PropertyTypes} />
      <Route path="/entitytypes" ponent={EntityTypes} />
      <Route path="/associationtypes" ponent={AssociationTypes} />
      <Route path={Routes.ROOT} ponent={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

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 ponent. 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" ponent={PropertyTypes} />
      <Route path="/entitytypes" ponent={EntityTypes} />
      <Route path="/associationtypes" ponent={AssociationTypes} />
      <Route path={Routes.ROOT} ponent={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

• javascript
• reactjs
• react-router

• Are you really using BrowserRouter? But, what I see is HashRouter. – Ukasha Commented Jul 22, 2018 at 2:09

4 Answers 4

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> ponent 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" ponent={PropertyTypes} />
      <Route path="/entitytypes" ponent={EntityTypes} />
      <Route path="/associationtypes" ponent={AssociationTypes} />
      <Route path={Routes.ROOT} ponent={Test} />
    </Switch>
  </div>
</BrowserRouter>

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

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 ponents. Same as here.

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.

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.