A Brief Overview of React Router and Client-Side Routing

What is React Router?

React Router is an API for React applications. Most current code is written with React Router 3, although version 4 has been released. React Router uses dynamic routing.

When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. That means almost everything is a component in React Router. — React Training

Why use React Router?

React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.

By preventing a page refresh, and using Router or Link, which is explained in more depth below, the flash of a white screen or blank page is prevented. This is one increasingly common way of having a more seamless user experience. React router also allows the user to utilize browser functionality like the back button and the refresh page while maintaining the correct view of the application.

What happens when you need to navigate TWO routing system?

An API is any place where a piece of code talks to another piece of code, but we often use it to mean somebody’s external resource that gives me values, or our own internal database resource(s).

If you are using a frontend and a backend, and you are potentially writing in multiple languages that don’t necessarily have the same routing conventions, don’t worry! The backend functions just as an API, and the user really doesn’t interact with it at all. The routes that used to manage the user experience and the routes that used to manage queries to the database are not the same.

Using React Router

First, install React Router, using either yarn or npm.

yarn add react-router-dom
npm install react-router-dom

Note that in the documentation and in the API, the actual component is called Browser Router . Some people prefer to simply refer to the component as Router, so you may see it aliased or choose to alias it in code, in which case it will be referred to as <Router> as long as it as been imported with an alias.

import { BrowserRouter } from ‘react-router-dom’
//alternatively, aliased
import { BrowserRouter as Router} from ‘react-router-dom’

When not using React Router, App is often the highest parent component in React apps. With React Router, however, the Router component needs to be the highest parent. This just lets all of the component use the power of Router, because as a parent, it passes down all of its props to its children, and thus the entire application.

To set this up most simply, in index.js, include:

ReactDom.render(<Router><App /></Router>)

React Router <Link>

Using <Link> functions similarly to using an <a> tag, but, as mentioned above, prevents a page refresh, and looks like a React component (because it is!).

For example, if you want a link to contact information,

<Link to= “/contact”>Contact Us</Link>

Using Link will navigate the user to /contact, and the URL will change, without the page reloading!

Where does this get included in the application? The Router component functions like a control center, and connects the route path (link) with the React component that should appear on the page.

<Route path="/contact" component={ContactPage} />

What does this accomplish? The “component=” syntax is like a reference for a callback function. Since components are functions, and functions can be referenced, then you can reference a component in the same way!

At its most basic, this is client-side routing

Additional Notes

1. Setting the path to just “/” — it effectively wraps, or shows up on every page. This is particularly helpful for things like a navigation bar, a footer, a sign in/out toggle button . So, at any point that the path has “/” in it — it is a match and the component will render.
2. Relatedly, in some systems, such as rails, you could have had a route like

books.com/novels/1 

which would show one novel, with /books being the index page, and the /books/1 is the show page with index 1 (the first book). It doesn’t work quite the same with React Router! To get a component to something to show up ONLY at a specific route, use the “exact” keyword.

Route exact path=‘/books’ 

will be all the books at books.com, or some sort of index page, and will not show at path=“dogs/1”

Since React Router allows you to set your own URLs, it can be helpful to construct a list of routes along with domain modeling and wireframing and consider if the URL make sense in the context of how an application would be structured and how a user interacts with it.

3. You cannot pass down props in a function reference! Instead, use the syntax.

render={() => <Text myExample='Marcella' />}

To access those values, you can then use

<p> Hello world from {props.myExample} </p>

Resources

Learn React from the creators of React Router