Learn React Router v6

 Introduction

React Router is used to make the dynamic Single Page Applications (SPA) without affecting the user interface with the reloads and can give the multi page functionality through the navigation in react

Outlet

It is used to render the child components where all the child components shared the same parent component example navigation bar.

First Step is to add the special key name children and provide the array of object route definitions whose route  , will start from the parent route. It is the special route which will have the component that contains the outlet from the react-router and the component which will render in all child components. In this example , we have the Root layout component which will be rendered to home child component for the "/" route



Second step  is to create the special component that will contain the common element and the outlet component from the react-router . In this example , we have the main navigation bar which will be shared to home child component.


NavLinks

Navlinks is used to see which link is currently active when we click on the link it will get highlighted , so the user is able to look at the currently active page . It has the active property in className and style where we can use the active property and style accordingly.


Links

Links used to write down the path in the search bar with the help of  "to="/" prop . It listens the click event and switch with the mentioned path so that the react router  then navigate and render the component.

Link redirect the user to the path and it appears as the anchor tag . <a> tag in the html reloads the page whenever some user clicks on the tag  but link disabled the reloading and enhance the user interaction to the website.


Use Params

Use Params are used to add dynamic path . Whenever the path cannot be hardcoded and content creates with the user interaction , in this case we create the dynamic path.
This starts with the colon and some variable  ( /:id ) whose value will be accessed to component  whose path is dynamic . Parameters will be accessed by importing useParams hook and accessing the properties of  parameters. To specify the URL parameters  is optional , append the question mark at the end :id?


Navigate Programmatically

At first we used to navigate with links , but we can also navigate dynamically with the useNavigate hook by extracting the function from the useNavigate and specifying the path in the first parameter . In this example , when onClick function will triggered , this navigate to the path "/events" . So that's how we can move to any path by useNavigate hook.


Absolute & Relative Path

When path followed by the "/" it will start from the starting and will not append after the path which is called absolute path

For example :- "/home" path will not append to any path because it starts with slash

When path doesn't contain "/" it will append to the path . For example "edit" :- it will append to the path from where we navigate this path.

<Link to=".."> Back </Link>  ( This will only work with relative paths which will back to page from where it calls ) 

We can also specify the prop of relative ,having two options when it sets to "path" , (..) will go back to the previously visited path and default it set to the route , which navigates to the parent route.


So, this is  some basic concepts  of react router which is pretty useful and important when using navigation in react app.

Thank you for reading :)









Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more