Navigating between routes

30 May 2020

Hrishi Mittal

This video was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Enrol now to view this video

960086e08d7e2836c1069ae3b4c4a63551c273c2

Lesson code - https://github.com/learnetto/calreact/tree/m7-react-router

You might have noticed I’m using the back button to go to the home page from an individual appointment page.

In this lesson, we’ll add a link to the homepage in the header.

Let’s first remove this header text from the index view file.

Instead, we’re going to create a new component called AppHeader and put our app title with a link to the homepage in it.

Let’s add it to AppRouter...

<AppHeader />

...and import it up in the code at the start of the file as well:

import AppHeader from './AppHeader';

Then, we will create a new file for the component, AppHeader.jsx. In it, we need to add extra information:

import React from 'react';
import { Link } from 'react router dom'
import Appointments from './Appointments';
import Appointment from './Appointment';

export const AppHeader = () =>
 <div>
  <Link to='/'>
   <h1>CalReact</h1>
  </Link>
 </div>

In AppRouter, this should be a named import:

import React from 'react';
import { Link } from 'react router dom'
import Appointments from './Appointments';
import Appointment from './Appointment';
import { AppHeader } from './AppHeader';

Now, if I refresh the page, we’ll see the new page header title with a link to the homepage.

When I click through to an appointment, I can go back to the homepage by clicking on the link in the header.

[screenshot 1:24-25]

Let’s add some CSS to make it look a bit nicer.

We’ll set a colour for the links and remove the underline in the code from appointments.scss:

a {
 color: darkred;
 text-decoration: none;
}

Now, when you refresh the page, you will see that our app looks a bit better and the two routes work well with links to each other.

[screenshot 1:38]

This lesson was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Get the full course

<- Previous Lesson

Next Lesson ->