Configuring Routes In React JS

Configuring Routes In React

Configuring Routes

We need to use 3 components from react-router-dom.

• BrowserRouter
• Routes
• Route

React Configuring Routes

• 1st Step:
  • Import BrowserRouter Component from ‘react-router-dom’ inside Index.js File in our React App.
  • Wrap our App Component with BrowserRouter Component.
• 2nd Step:
  • Now we have to create a folder called ‘components’ in our SRC folder and add 3 components called Home.js, About.js and Contact.js inside components folder.
• 3rd Step:
  • Import Routes and Route Component from ‘react-router-dom’ in App.js File.
  • Use path prop to define URL.
  • Use element prop to define the corresponding component.
  • Don’t forget to import components you are using inside App.js File.

Link Component In React Router

• In React Router Library, the Link component allows you to customize anchor tags with theme colors and typography styles
• In React Router Dom, the Link component represents the HTML element. It accepts the same props as the Typography component, as well as the system props.

Active Link In React Router

Active Link

In React App, whenever we click a particular link then we have to highlight that link by using some sort of CSS thats called Active Link functionality.

Navigating Programmatically In React Router

Objectives

• Navigation On Button Click
• Navigation Inside Event Handler
• Navigating To Multiple Pages With Single Event Handler
• Condition Based Navigation
• Go Back Button

Page Not Found In React Router

Page Not Found

When no route is find in the react application then we need to display the PAGE NOT FOUND page to indicate user that url or route is not appropriate.

Source Code

App.js File Code

import logo from './logo.svg';
import { Routes, Route, useNavigate } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Navbar from './components/Navbar';
import PageNotFound from './components/PageNotFound';
import Products from './components/Products';
import Shirts from './components/Shirts';
import Jeans from './components/Jeans';
import Users from './components/Users';
import UserDetails from './components/UserDetails';
import Admin from './components/Admin';
import Search from './components/Search';

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/products' element={<Products />}>
          <Route index element={<Shirts />}></Route>
          <Route path='shirts' element={<Shirts />} />
          <Route path='jeans' element={<Jeans />} />
        </Route>
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/search' element={<Search/>} />
        <Route path='/users' element={<Users />}>
          <Route path=':id' element={<UserDetails />} />
          <Route path='admin' element={<Admin />} />
        </Route>
        <Route path='*' element={<PageNotFound />} />
      </Routes>
    </>
  );
}

export default App;

Home.js File Code

import React from 'react'

function Home() {
  return (
    <div>
      <h1>Welcome To My Home Page</h1>
    </div>
  )
}

export default Home

About.js File Code

import React from 'react'

function About() {
  return (
    <div>
      <h1>Welcome To My About Page</h1>
    </div>
  )
}

export default About

Contact.js File Code

import React from 'react'
import { useNavigate } from 'react-router-dom'

function Contact() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Welcome To My Contact Page</h1>
     
    </div>
  )
}

export default Contact

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/xq56cv3456nyeu4/CONFIGURING+ROUTES+React+JS.rar/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/oye42tr3i5z51qz/new-app.rar/file