Routing React Apps — Getting started

Carly Ann Pecora
Jul 2, 2019 · 2 min read

React routes fit very nicely into any finished front-end application. You do not need much set up; react routes are friendly and easy to work with. When you finished creating all the components of your react app, you are able to add routes that render your different components. First run :

npm install --save react-router-dom

Add import { Link } from ‘react-router-dom’ to the component in which you will include your links. I want the links in my Navbar, so I imported the Link component to my Navbar component. Add <Link></Link> around the elements/texts you would like to link to your routes. Add your routes in as<Link to='/home'> . The to='/' will be the route that appears in your URL. When you are finished creating your links, they should look like this:

import Link component; add links to Navbar (I do not use a route for my contact button)

To get your routes working, navigate to your top-level component and add import { BrowserRouter as Router, Route } from ‘react-router-dom’ to the top of the file (Adding as Router is unnecessary, it just allows me to refer to the <BrowserRouter> component simply as <Router> ). In your App component, add the <Router></Router> wrapper:

My Navbar component will appear on every page and does not require any routes, so I leave it alone.

In your app, import any components that require routing. Each of these components will be wrapped in <Route></Route> , and each <Route> will appear as follows:

<Route path="/resume" component={ Resume } />

Make sure your <Link> routes match your corresponding <Route> paths.

When finished:

If you have a root path '/' , you may need to use the property exact={true} so the '/' route finds the exact URL match.

And boom, you’ve got react routes!

Zero Equals False

Zero Equals False is known for providing insights into advanced technologies and concepts related to Software Development. At Zero Equals False, we really enjoy diving into complex topics and sharing only the most valuable findings with our readers.

Carly Ann Pecora

Written by

Zero Equals False

Zero Equals False is known for providing insights into advanced technologies and concepts related to Software Development. At Zero Equals False, we really enjoy diving into complex topics and sharing only the most valuable findings with our readers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade