Nerd For Tech
Published in

Nerd For Tech

Setting up React Router in your create-react-app

If you’re working on a react-app with multiple pages, you’ll want to check out this neat package React Router.

React Router does what the name implies — it manages the routing for your react components.

In this article, we’ll go over how to set up the basic routing for your components drawing examples from a dance site that I’m working on.

Okay, let's get started!

First, install react-router.

Once the package is installed, go to your index.js file in the root of your src directory and import BrowserRouter as Router from “react-router-dom”.

Then proceed to wrap your App component with the Router component.

By doing so, all the components within App will be able to communicate with the Router and be involved within its network.

Once you’ve done so you can start creating your Routes.

  • At this point, you can draw up your routes within the App component, but in this case, I have a bunch of pages to route to and would rather keep them organized within another component called RoutesTree. I also like to keep my App component light on the number of lines of code.
RoutesTree Component

But lets zoom in.

The important pieces are this.

Import Route and Switch components from “react-router-dom”

Import the components that will ultimately render a page your user will visit (any component that needs a route) into the file.

Then use the Switch component to wrap all of your Route components.

Within the Switch component tags, you can add any number of Route components. Each Route component will take a component that you imported as well as a ‘path’ prop. You can set the path property to any endpoint you choose.

You can continue this until you have a list as long as the one I showed you earlier.

But here are some notes.

  • Two routes cannot have the same path
  • If you have a header and footer you want to be visible on all pages, simply pull them outside of the Switch component

Like I did here in the App component.

Header + Footer outside of the RoutesTree/Switch Component
  • If you set your ‘Home’ component’s path to ‘/’, make sure to place it as the last component rendered → otherwise the Router will register the ‘/’ immediately and render the ‘Home’ component instead of your other pages (you could also add the ‘exact’ prop if you prefer)

And that's about it folks! Super easy right? I hope it helps!

I highly recommend going through the React-Router docs because they’re really well documented and the library can do some pretty neat stuff.

Now fire up your servers and start reveling in your routing power.




NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Recommended from Medium

Creating PWA with Angular 5.

Whaatt?? singletons are not Singletons?

Part Two: How to Record Videos in VueJS with Ionic Framework, Capacitor and Cordova Plugins

Code guidelines

EasyBridge:A new design of JS-Brdige

Testing your JavaScript Code

Asynchronous Programming

Beginners’ guide to the useEffect hook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Janu Sung

Janu Sung

Just another one of those dreamers with a sparkle in his eyes.

More from Medium

Reusable components in REACT

How to use Swiper.js with React.

Quiz App with React (Class components ) and Redux

How compress your React App?