React router is a very useful tool for creating a React app. React Router is probably the most popular library developers use to do all of their client-side routing. The reason we use client-side routing is because Create React App is designed to create single-page applications. Meaning, the application only contains one HTML document and the server only has to load the original GET of this document, CSS, and JS files; rather than multiple pages. The big benefit and reason to this is for the speed of the application. What does React Router do? There are many things React Router can do, but the main two features to remember:
1. Rendering components based on on the URL. Ex: When the url is /ShoppingList, your ShoppingList component will display.
2. Page navigation using JavaScript. Ex: On a navigation bar, when you click the Shopping List tab, the page content updates to the ShoppingList component.
Installation
You can install React Router from the public NPM directory in two ways. In the terminal from the root directory of your application run either:
npm install react-router-dom
or
yarn add react-router-dom
If you are on Version 5 and need to upgrade to version 6, add the @latest tag to the end of either. Ex: npm install react-router-dom@latest.
Basic Example
In index.js:
We must first import BrowserRouter from react-router-dom and wrap our entire application in the BrowserRouter component.
In App.js:
Firstly, we must import { Routes, Route } from react-router-dom. Next, we want to import all the components we want to render. Lastly, we want to put the Routes component in the App function's return statement and nest all of our individual Route components in the Routes component.
Each Route takes two props. First is the path of the route. Ex: path="/contact" will route to yourWebsite.com/contact. Second is the element of the path, or what you want to display for that path. In this example it will be the Contact component. The reason we use the exact prop for the home route of "/" is that if we enter a value into the URL that doesn't exist like /something, it will still render our home component. This happens because "/" without exact would still be a partial match to /something. Also, we set a path to "*" is this acts as a catch in case we get a URL that doesn't meet any of the criteria. This is good for any kind of error messages or 404 not found statements.
In NavBar.js:
Import either {NavLink} or {Link} from react-router-dom to start. Both Link and NavLink render as an <a> tag in the DOM and have the same base functionality. They are used to set URL's and keep track of the browsing history. They will both link to an internal path, EX: to="/projects". This to prop acts as the href= of an <a> tag. When these <a> tags are clicked, they change the URL to that path. In doing this it tells React Router to display the Route that matches the new URL. The difference between NavLink and Link is NavLink gets styled attributes when it matches the current URL. As in the name, NavLink is typically better for a navigation bar because of this styling.
Side note: As discussed in the previous section with the exact prop you may have to use exact for a basic path like "/". This is because the other paths that contain "/" would still be partial matches.
Conclusion
Client-side routing is a must for single-page applications and React Router is the best / most used tool to handle this. I hope you were able to learn something about the core functionality of React Router in order to do some client-side routing. If you made it this far, thanks for reading and happy coding :)!
Additional Links:
https://www.w3schools.com/react/react_router.asp
https://reactrouter.com/en/main/start/overview
https://www.npmjs.com/package/react-router
Top comments (0)