Step 5

Add a navbar

We've added new pages, but we want to be able to navigate to between them inside our app. We can do that by creating a navbar.

src/components/Navbar.tsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Navbar extends Component {
	render() {
		return (
			<nav>
				<Link to="/" className="App-link">
					Home
				</Link>{' '}
				|{' '}
				<Link to="/books" className="App-link">
					Books
				</Link>
			</nav>
		);
	}
}

And we just add it to our App

src/App.tsx

import React, { Component } from 'react';
import './App.css';
import BooksPage from './containers/Books';
import { Switch, Route } from 'react-router-dom';
import HomePage from './containers/Home';
import Navbar from './components/Navbar';

class App extends Component {
	render() {
		return (
			<div className="App App-header">
				<Navbar />
				<br />
				<Switch>
					<Route exact path="/" component={HomePage} />
					<Route exact path="/books" component={BooksPage} />
				</Switch>
			</div>
		);
	}
}

export default App;