React Router Params

In React, "params" usually refer to URL parameters or query parameters that are passed to a component via its props.

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

//This the user component page where we are using useParms hook from the react routerdom 
const User = () => {
// declaring  the params to useParms
    const params =useParams();
//we are using name as params to declare mutiple users instead of single user
    const {name}=params
    //console.log(name)
  return (
    <div>
      <h1>This is {name} page</h1>
    </div>
  )
}

export default User

import React from 'react'
import {Link} from 'react-router-dom' 
const About = () => {
  return (
    <div>
    <h1>AboutPage</h1>

    <li><Link to="/user/preeti">Preeti</Link></li>
    <li><Link to="/user/elena">Elena grace</Link></li>

    </div>
  )
}

export default About

import React from 'react'
import "./App.css"
import Home from './Component/Home'
import Nav from './Component/Nav'
import About from './Component/About'
import Services from './Component/Services'
import ContactUs from './Component/ContactUs'
import ErrorPage from './Component/ErrorPage'
import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom'

import User from './Component/User'
const App = () => {
  return (
    <div>
<Router>
    <Nav/>
    <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/services" element={<Services/>}/>
        <Route path="/contactus" element={<ContactUs/>}/>
        <Route path="/*" element={<ErrorPage/>}/>
        <Route path="/*" element={<Navigate to ="/"/>}/>
        <Route path="/user/:name" element={<User/>}/>
    </Routes>
</Router>
    </div>
  )
}

export default App

URL parameters are part of the URL path and are used to identify a specific resource. For example, in the URL http://localhost:3000/user/preeti, "Preeti" is a URL parameter that identifies the user with the name Preeti. In React, you can access URL parameters using the useParams hook, which returns an object containing the parameter values. we are passing the

In App.js file we are in router <Route path="/user/:name" element={<User/>}/> we can use name parameters for multiple users.

Here in User.js component, we are import { useParams } from 'react-router-dom' in the users component declaring params

const params =useParams();

Query parameters are optional key-value pairs that can be added to a URL to provide additional information about the request. For example, in the URL https://example.com/search?q=react, "q" is a query parameter with the value "react". In React, you can access query parameters using the useLocation hook to get the current URL and then parse the query string using the query-string library or a similar tool.

Both URL parameters and query parameters can be used to customize the behavior of a component based on the current URL. For example, you could use URL parameters to show a specific user's profile or use query parameters to filter search results.