CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
gaurav
gaurav

Reputation: 19

React router renders blank page after import

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?

Upvotes: 1

Views: 2001

Answers (2)

Nicholas Dullam
Nicholas Dullam

Reputation: 529

Similar to the answer from Shina, who covers it pretty well, just a few more comments. Keeping your React-Router and switch in your App.jsx file is relatively standard. Since App is the parent component, the Router and Switch will only be rendered once, while keeping the router in Nav.jsx would force the Switch re-rendered with each route. But keeping the Switch wrapped in the Router component should solve your issues here.

Upvotes: 0

ShinaBR2
ShinaBR2

Reputation: 2715

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.

Upvotes: 2

Related Questions