9. Introduction to React Router
Activity 9.01: Creating an E-Commerce Application
Solution:
- Start off by creating your new project; delete
logo.svg
andApp.css
, and then clear out the contents of App.js:$ npx create-react-app router-store
- Include the React Router imports at the top of
App.js
. You will need to include theRouter
,Switch
,Route
, andLink
components. You will also need to include a couple of utility functions such asuseRouteMatch
:import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch } from 'react-router-dom';
- Build the
App
component to begin with. Wrap it in a Router component and write yourSwitch
statement. You can flesh out the routes later:const App = () => ( Â Â <Router> Â Â <div className="App"> Â Â Â Â <h1>My Store</h1> Â Â Â Â <hr /> Â Â Â Â <Switch></Switch> Â Â </div> Â Â <...