DEV Community

loading...
Cover image for Using react router to make a navbar

Using react router to make a navbar

adrienclesse profile image Adrien ・2 min read

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 βŒ›

Alt Text

  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";

Alt Text

  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 πŸ”—

Alt Text

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 πŸ’‘

Alt Text

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

Discussion (0)

pic
Editor guide