React router renders blank page after import

Question

I am new to React and I am trying to create a sidebar having links to different pages or modules. I have everything modularized meaning, the sidebar Navigation is a separate module where I import all the linked classes and then use react-router-dom to redirect the paths. But somehow when redirecting, The response page is blank.

Navigation Module:

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

import Colors from "../../pages/Colors";
import Typography from "../../pages/Typography";
import Spaces from "../../pages/Spaces";
import Buttons from "../../pages/Buttons";
import Inputs from "../../pages/Inputs";
import Grid from "../../pages/Grid";

import "./style.css";

class Nav extends Component {
  render() {
    return (
      <div className="nav">
        <ul>
          <li>
            <Link to="/colors">Colors</Link>
          </li>
          <li>
            <Link to="/typography">Typography</Link>
          </li>
          <li>
            <Link to="/spaces">Spaces</Link>
          </li>
          <li>
            <Link to="/buttons">Buttons</Link>
          </li>
          <li>
            <Link to="/inputs">Inputs</Link>
          </li>
          <li>
            <Link to="/grid">Grid</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/colors" component={Colors} exact />
          <Route path="/typography" component={Typography} exact />
          <Route path="/spaces" component={Spaces} exact />
          <Route path="/buttons" component={Buttons} exact />
          <Route path="/inputs" component={Inputs} exact />
          <Route path="/grid" component={Grid} exact />
        </Switch>
      </div>
    );
  }
}

export default Nav;

Now the link classes that I import here have just simple content right now like the following.

pages/Colors/index.js:

import React, { Component } from "react";

class Colors extends Component {
  render() {
    return (
      <div>
        <h1>Colors</h1>
      </div>
    );
  }
}

export default Colors;

The main BrowserRouter is located in the App.js component from where the Sidebar component is called having Navigation component.

Now the thing is if I remove the BrowserRouter from App.js and put it in the Navigation module the routing works.

How come so?

Which pattern is the correct one?

ShinaBR2 ShinaBR2 · Accepted Answer · 2020-07-04T01:45:10

When you work with React-router and React-router-dom, make sure the Router component is the top most parent. You can try again by:

Move all Router, Switch into App.js.
Inside Sidebar component, just render links, neither Switch nor Route component.

It will work.

React router renders blank page after import

2 Answers