In this lab, use React Router to create a simple React application that supports URL routing. In this lab, we will focus on how to use React Router, and hence our components will simply comprise just h1
, div
and/or a
tags.
- Create react app:
create-react-app my-app-name
- Install dependencies:
yarn add react-router-dom
yarn add enzyme enzyme-adapter-react-16 --dev
- Remove boilerplate code in
App.js#render()
- Create enzyme config file in
src/setupTests.js
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
- Smoke test:
yarn test
- test should still passyarn start
- localhost:3000 should not show any errors
- Create a
MyApp
component, which simply displays:
<div>
pending implementation
</div>
MyApp
is where you will place all of your Route and Links components- Place
MyApp
insideApp.js#render()
- Create a
NavLinks
component, which simply displays:
<div>
<Link href="/">Home Page </Link>
<Link href="/tacos">Tacos Feed </Link>
<Link href="/twitter">Twitter Feed </Link>
</div>
- Place NavLinks in
MyApp
- Create a component for
HomePage.js
, which simply displays:
<h1>This is your home page<h1>
- Add a route to
HomePage
component inApp.js
- hint: you will need to
import {BrowserRouter, Route} from 'react-router-dom'
- hint: you will need to
- Create
TacoDetail
component and add a route to it inMyApp.js
- This component should simply display:
<div>
this is the detailed page for taco number {props.match.params.id}
</div>
- Any request for localhost:3000/tacos/:id should dipslay this component
- Redirect requests for 'tacos/42' to
SpecialTacoPage
(you have to defineSpecialTacoPage
component, of course)
- Add a
Switch
component to your application (see https://css-tricks.com/react-router-4/#article-header-id-2)