HANDLE ROUTING IN REACT

HANDLE ROUTING IN REACT

The most popular routing library in React is React Router, however it can be challenging to understand some of its more advanced features. To help you use even the most complex elements of React Router easily

REACT ROUTER BASICS :

I want to initially go over the fundamentals of React Router before we get into its more complex capabilities. You must run npm I react-router-dom to instal React Router before using it on the web. This module instals React Router explicitly in the DOM. Install react-router-native in its place if you're using React Native. The libraries operate virtually exactly the same save from this one minor variance.

In this tutorial I will be focusing on react-router-dom, but as I said both libraries are nearly identical.

Once you have this library there are three things you need to do in order to use React Router.

Setup your router

1.Define your routes

2.Handle navigation

Configuring The Router-

Setup of your router is by far the simplest step. All you have to do is wrap your entire application with the router you specifically need to import.

import React from"react"

import ReactDOM from"react-dom/client"

import App from"./App"

import { BrowserRouter } from"react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(

<React.StrictMode>

<BrowserRouter>

<App/>

</BrowserRouter>

</React.StrictMode>

)

In most cases, your application's index.js page will import your router, which will then wrap your App component. The router functions just like a context in React and gives your application all the information it needs to do routing and use all of React Router's custom hooks.

DEFINING ROUTES-

The next step in React Router is to define your routes. This is generally done at the top level of your application, such as in the App component, but can be done anywhere you want.

import { Route, Routes } from"react-router-dom"

import { Home } from"./Home"

import { BookList } from"./BookList"

exportfunctionApp() {

return (

<Routes>

<Routepath="/"element={<Home/>}/>

<Routepath="/books"element={<BookList/>}/>

</Routes>

)

}

For each route in your application, you just need to define a single Route component, which you then group together into a single Routes component. React Router will examine the routes specified in your Routes component if your URL changes, and it will render the content in the element prop of the Route with the path that matches the URL. If our URL in the example above was /books, the BookList component would be displayed.

The good thing about React Router is that it only updates the content of your Routes component when you switch between pages. The remaining text on your website will remain unchanged, improving both performance and user experience.

HANDLING NAVIGATION-

Handling navigation is React Router's last step. Anchor tags are typically used for navigation in applications, but React Router uses its own unique Link component instead. This Link component merely acts as a wrapper around an anchor tag, ensuring that all routing and conditional re-rendering are handled correctly so that you may use it in the same way as a standard anchor tag.

import { Route, Routes, Link } from"react-router-dom"

import { Home } from"./Home"

import { BookList } from"./BookList"

exportfunctionApp() {

return (

<> 

<nav>

<ul>

<li><Linkto="/">Home</Link></li>

<li><Linkto="/books">Books</Link></li>

</ul>

</nav>

<Routes>

<Routepath="/"element={<Home/>}/>

<Routepath="/books"element={<BookList/>}/>

</Routes>

</>

)

}

Two links to the home page and the books page were included in our example. You'll also see that we set the URL using the to prop rather than the href prop that you're used to using with anchor tags. You must keep in mind that this is the only distinction between a link component and an anchor tag because it is simple to unintentionally utilise a href prop rather than the to prop.

Another thing to keep in mind about our updated code is that the navigation we are rendering at the top of the page is outside of our Routes component, which means that when we switch pages, only the content in the Routes component will change.