#100DaysOfCode Day 12: React Router

Day 12: React Router

This week we were introduced to another technology, React Router. I am still pretty fuzzy on how to implement it into my application. So I think today would be a good day for me to review React Router

Source: https://www.pexels.com/photo/data-transfer-by-optical-fiber-in-network-server-4330787/

What is React Router?

Let’s break this down. What is routing anyway? Routing refers to keeping a webpage up to date with the current-url. As of now, I have mostly been creating apps that live on a single webpage. This simplifies the creation process immensely for the developer but can hinder the user experience to a great degree.

By having a single web page without React Router, the user is unable to use the back and forward buttons provided by the browser. The user can’t bookmark the page and can not share content easily from a page.

React Router gives our users these abilities by having our single-page website mimic a multipage website. This allows us to conditionally render components based on the current URL. Writing multi-page websites can be tricky but React Router gives us the benefits of a multi-page site with the simplicity of a single-page website.

How does it work?

React Router has built-in components that make our job easier to do. Let’s take a look at each one of them.

1. <Route>

Arguably the most important component, Route’s basic responsibility is to render some UI when its path matches the current URL.

Code snippet for Route Example

In the example above, Route is used to manage two separate components. The first <Route> will render the <Home /> component when no directory path is given. When the user navigates to the /news path, React Router will only render the children component inside the <Route path=”news”> parent. This is a very basic example of the magic of <Route>

2. <Redirect>

<Redirect> is a component I have not used as much but it is still powerful nonetheless. Redirect does what sounds like — it will redirect the user to a new location.

Code snippet for Redirect Example

3. <Link>

Another component with fairly semantic meaning, <Link> will provide navigation to a particular path of your application.

Code snippet for Link Example

4. <NavLink>

<NavLink> is very similar to link. It is a special version of <Link> that will add styling attributes to the rendered element when it matches the current URL. After you visit a component with <NavLink>, its color styling will change color much like a regular hyperlink.

5. <Switch>

Switch works in tandem with the <Route> component to effectively manage path Routing. Consider the example below. Route appears without a switch statement. We see an /about path but we also see that the user path has a colon representing a dynamic path. Having these paths constructed like this will cause both the <About /> and <User /> components to automatically render to the page. This Switch component can make very powerful logic that is much more simple to manage.

Code snippet without Switch component

We can avoid this double rendering by wrapping these Route components with a Switch component. Switch will render a Route exclusively rather than inclusively, rendering only one path at a time.

Our implementation

Here is an example of our implementation of Router into our current project. We are using the <Switch /> component within our App component to manage. First, the user will route to our AllMovies component on our home page. Once a user clicks a movie poster, the user will then see only a <MoviePage /> component. You will also notice we added <Route /> that also leads to our <Error /> component in case the user tries to visit a non-existent Movie URL.

Code snippet of our Router implementation

That’s all for today — see you tomorrow!