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]