Skip to main content

Basic Navigation

You can read full guide and tutorial here

Navigation in React

Page creation

In page folder, we will have two page Home page and About page

image.png

In main.tsx file, we will defined two paths "/" and "/about" when you direct to "localhost:5173/" , it will render the HomePage component and  when you direct to "localhost:5173/about", it will render the AboutPage component

Route1.png

path define "/" path and render the <HomePage /> element

 

Links define.

When use click on Link element, it will tell the page to go to URL in "to={"/path"}"attribute

in HomePage.jsx and AboutPage we will create a button a wrap with the Link component from react-router-dom

 

HomePage.jsx

Route2.png

AboutPage.jsx

Route3.png

 

When click at the about button, the page will render about page as we define in Route element in main.tsx

image.png


Here it is our basic navigation in React, next we will learn how to manage the dynamic route

Back to top