React JS Router

This is v5 of react router.

1
npm i npm i react-router-dom@5

Then in App.tsx wrap all the component fragments in a Switch and separate them using Route.

Menu here is always shown for all routes.

1
2
3
4
5
6
7
8
9
10
11
12
<Menu />
<Switch>
    <Route exact path="/">
        <Home />
    </Route>
    <Route path="/addequipment">
        <AddEquipment />
    </Route>
    <Route path="/addschedule">
        <AddSchedule />
    </Route>
</Switch>

Route takes a property that matches the browser route, example /addequipment.

The Home component above is the root so will need exact path="/" else this will match all routes as they start with /

Then we cannot use a href in the menu. These need to be replaced with Link to

1
2
3
4
5
import { Link } from "react-router-dom";

<Link to="/">Home</Link>
<Link to="/AddSchedule">Add Schedule</Link>
<Link to="/AddEquipment">Add Equipment</Link>