React part 12

5 min readJul 8, 2021

Today we are talking about React Router a very important step in all this.

OK so lets get this going!

we first start off with installing “router dom”, just drop this into your terminal:

npm install react-router-dom

OK once that installs you go to the route component, Most likely the App.js

then you import this on top of your page:

import {BrowserRouter as Router, Route, Switch} from “react-router-dom”

Now we have to surround the whole application with a “Router” like so:

If you see on lines 8 and 18 we wrapped it around the whole component! Now we can use this router in the entire application.

Next, we should put Switch and Route in Div with the className of “content”.

The Route takes in a path property of “/” means yourwebsite.com/(it will take you to your homepage most likely).

It could also be /aboutPage or /MonkeyHouse, so you can put whatever you want that specific route to go to! Then what goes inside that route is what component we want to load when we hit this URL endpoint which is Home component.

One thing to Drive in deep is the Switch component! The switch makes sure that only one endpoint is showing only at a time. (will show later)

Now, lets set up another route just for testing sake:

Create a new file inside src called Create.js, then inside there it should look like this:

simple, we just need to connect it to everything and we will see it in the browser.

you go back to App.js and import on top and a second route inside the switch statement like so:

if you look on line 18–20 we now have a second route to go to. lets check the browser….

If you look we went to create, but it still sent me to the home page, what gives?

This actually has to do with how React deals with matching routing, it goes through our code and sees the first route which is “/” then stops there never actually hitting the “/create”(its a robot it doesnt know any better!).

so we have to add “exact” inside the Route with the home page component :

see on line 15 we added exact and that will only render if it is in fact a forward slash and only a forward slash.

now we look at the browser and walla we have a create page:

Lastly, I want to talk about the switch component a bit more:

In simple terms, a switch is there to render only one component at a single time. Then it will look from top to bottom to figure out which route we are looking for. It will render that exact component that matches that route.

Links:

Lets talk about Links, well because right now we are using A tags to render it. this sends a request to the server and actually slow’s it down and our sight. we can use links in our navbar section to speed it up:

above is how we usually do it with “a-tags”!

but we want to do it like this:

import Link from react-router-dom and then on lines 11 and 12 edit the “a” tag from an actual “a-tag” to a “link-tag”. we also need to take away the HREF tag and put “to” tag which basically does the same as the HREF.

Link also has a special function that stops that request to the server and keeps it in react and only looks at the URL or the pathname then renders the component.

Then if you go to your browser and check it and click the two different navbars it will load so much faster! instead of ending a fresh request every time we want a new page to be rendered.

OK, that was React Router, hope you all learned something. message me if you have any questions.

React…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)