Chapter 7

Nov. 29

Chapter 7 summary

07_01 Installing React Router v6

First, install react-router-dom version 6 (from within the react-app directory):
npm install react-router-dom@6
Wipe out the tahoe_peaks and the List and everything inside the App()’s return statement.
Have the App just return an <h1><h1>App</h1>

Add some function components (these represent pages in this case):

function Home() {
    return (
        <div>
        <h1>My website</h1>
        </div>
    );
}

Using similar syntax, make a Contact() and About() component as well. Then have the App() return <Home /> for starters.

07_02 Configuring the Router

Start by cleaning up and setting up some stuff in index.js. Get rid of the reportWebVitals() call at the end of the file. Wipe out React.StrictMode wrapper around <App /> and lastly, nix the import for reportWebVitals.
Add an import from react-router-dom
import { BrowserRouter } from "react-router-dom";
Wrap our <App /> with <BrowserRouter />
Add some more things to our import. Add Routes and Route to the import statement so
import { BrowserRouter, Routes, Route } from "react-router-dom";

Then use Routes and Route inside the BrowserRouter, yet before our <App />

<BrowserRouter>
  <Routes>
    <Route (filling this in soon in next step below) />
  </Routes>
</BrowserRouter>

As we fill in our first <Route>, add a path and an element. The element will be the component we’re calling to render at that path. So
```
<Route path=”/” element={<App />} />
```
And then we’ll do the another page/component we’re working with at the moment
<Route path=”/about” element={<About />} />
Before this will work, we need to change the default export in App.js and also export the About and App functions (and also do Contact while we’re at it; Home can stay as-is with no export).
Inside index.js, import these things
import { App } from "./App";
import { About } from "./App";
It should work at this point and you can test the About page in the browser by navigating to the url (localhost:3000/about).

Now do Contact. So…

<Route path="/contact" element={<Contact />} />

And while we’re at it, change our import so we import all three components (App, About, Contact) from “./App” all in one line.

07_03 Incorporating the Link component

Start to End summary: We’ve established routes to our components in the last lesson. Now, we can create links to the routes via the Link component that’s also part of react-router-dom.

Import the Link component from react-router-dom in our App.js
import { Link } from "react-router-dom";
Inside the Home component add a <nav> wrapper and one <Link /> component inside
```
<nav>
<Link to="/about">About</Link>
</nav>
```
View the Home page and see it in action. The About link will bring us to the /about page.
Do the same with Contact (add a <Link /> component).

Now add copy+paste that to the About component and also add a link to Home there

return (
<div>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>
<h1>About Us</h1>
</div>
);

And, why not? Add it to the <Contact /> component also.

07_04 Nesting links with React Router v6

Start to End summary: From our established page components with navigation to learning how to add a child within a page component utilizing Outlet, another component that’s available from react-router-dom.

Create a new component that represents a History page that will ultimately get placed as a child of our About page. For starters, inside App.js add:
```
export function History() {
  return (
  <div>
    <h1>Our History</h1>
  </div>
  );
}
```
Now for the routing, go to index.js and nest a Route inside the About Route.
```
<Route path="/about" element={<About />}>
<Route element={<History />} />
</Route>
```
Also import History from App
Now, the path for this will be “history” with no leading slash (path=”history”). It won’t work. Gotta go to App.js and do more…

Now go to App.js and import Outlet from react-router-dom. Then add <Outlet /> in the About component:

export function About() {
  return (
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
    <h1>About Us</h1>
    <Outlet />
  </div>
  );
}

Visiting /about/history will now show us the History component inside the About component. Yet, visiting /about only shows the About component.