A Super-Quick Start Guide to React Router

What is React?

React is a framework for building single-page applications (SPAs). These applications will look as though there are multiple pages, but in reality, it’s a single page, with the conditional rendering of different components based on user interaction. These components are designed to look like new pages.

What is React-Router?

React-Router works by using the URL route to render components, e.g., /contact for the contact page, www.yourwebsite.com/contact resulting in the render of components that make up the contact page.

Getting started with React-Router

Install using npm:

npm install react-router-dom

Setup — index.js

In your index.js file, import BrowserRouter.

Your App needs to be wrapped with <BrowserRouter> in order for it to work with React Router. This means that everything rendered by your app is inside the <BrowserRouter> imported from React Router.

Setup — App.js

Import Switch & Route components from React Router. Add a Switch element to render one component at a time.

Add your Routes

Between your switch tags, you can now add your Routes. The routes define which component to render for a given URL.

Note: all homepage URLs begin with ‘ / ’ so you will need to add an ‘exact’ to your home Route component. Without the “exact,” your app will load the first route that matches the ‘/’ path.

Don’t forget to import the components your Routes are rendering!