Using react router to make a navbar

Introduction 💻

Once you need to interlink different pages in a react project, you will need to use the react Rooter as hyperlink to jump from one page to another

Installation ⌛

1. Before coding, you will need to download react router using the terminal inside of the current project and write "npm install react-router-dom"

2. Second step will be to import the different needed element in the header import. You can copy-paste it from here :

{
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

1. The first tag to rener is . The links and the switch won't work if they are not inside of a Router tag.

link 🔗

Within the navbar, you will now use "Home" to create a link. It is the equivalent of the HTML a href. It means now that when you click on the home link, the url will add /home at the end of the url link.

switch 💡

Once you are able to change the url clicking the links, you still need to set a Switch to be able to open another page acording to the current url.

In this example, if in the url the route path is set as /main, then the page Main.js is going to be opened in the website.

Adrien Clesse