React Router dom
Installation:
• npm i react-router-dom
[Link]
import React from 'react';
import ReactDOM from 'react-dom/client';
import './[Link]';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
const root = [Link]([Link]('root'));
[Link](
<[Link]>
<BrowserRouter>
<App />
</BrowserRouter>
</[Link]>
);
[Link]
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home/Home'
import About from './components/About/About'
function App() {
return (
<div >
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
</div>
);
}
export default App;
Navigation
import React from 'react'
import { Link } from 'react-router-dom'
function Navbar() {
return (
<div>
<Link to='/'>Home</Link>
<Link to='about'>About</Link>
</div>
)
}
export default Navbar
Absolute Path:
• Absolute paths begin with a / character.
• They represent the route path relative to the root URL of the
application.
<Route path="/about" component={About} />
In this example, /about is an absolute path. It represents the route to
the About component relative to the root URL of the application.
Relative Path:
• Relative paths do not start with a / character.
• They represent the route path relative to the parent route.
<Route path="details" component={Details} />
•
• Here, details is a relative path. It represents the route to the
Details component relative to the parent route's path. If the
current URL is /products, navigating to /products/details will
render the Details component.
Nested Routes:
• Nested routes allow defining routes within other routes.
• Relative paths are used within nested routes to define routes
relative to the parent route.
• <Route path="/products">
• <Route path="details" component={ProductDetails} />
• <Route path="reviews" component={ProductReviews} />
• </Route>
Within the /products route, details and reviews are relative paths.
They represent routes relative to the parent route /products.
Using [Link] for Dynamic Paths:
• // Use it in this way, and it should work:
• <Route path='*' element={<NotFound />} />
• Use this for Showing Not found page If given URL path is not
present
• Check the chronology while using this
• NavLink is a component provided by react-router-dom that
renders a navigation link to a specific route. It automatically adds
styling to the rendered link when it matches the current URL.
[Link]
import React from 'react'
import { NavLink } from 'react-router-dom'
import classes from './[Link]'
function Navbar() {
return (
<div>
<NavLink to='/'>Home</NavLink>
<NavLink to='about'>About</NavLink>
</div>
)
}
export default Navbar
[Link]
.active{
font-weight: 1000;
}
UseNavigate Component
import React from 'react'
import { useNavigate } from 'react-router-dom';
function Home() {
let nav = useNavigate();
let goToMyProfile = () => { nav('/about/myProfile'); }
let goBack = () => { nav(-1); }
return (
<div>
Home
<button onClick={goBack}>Back</button>
< button onClick={goToMyProfile}>Click me</button>
</div>
)
}
export default Home
Dynamic Route
function App() {
return (
<div >
<Navbar/>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/students/:studentId' element={<StudentDetails/>}/>
</Routes>
</div>
);
}
export default App;
Get id from params
import React from 'react';
import { useParams } from 'react-router-dom';
function StudentDetails() {
const params = useParams();
const { studentId } = params;
return (
<div>
Student Details for {studentId}
</div>
);
}
export default StudentDetails;
UseSearchParams
import React from 'react'
import { useSearchParams } from 'react-router-dom'
function Home() {
const [searchParams, setSearchParams] = useSearchParams();
const studentsWithAge = [Link]('age');
return (
<div>
{studentsWithAge}
<button onClick={()=>setSearchParams({age:10})} >filter</button>
<button onClick={()=>setSearchParams({})}>Reset</button>
</div>
)}
Assignment
• Creating React Frontend:
• Create a React frontend application using Create React App.
• Set up React Router DOM to create routes for different pages of the alumni
website, including pages for home, alumni profiles, events, news, and
contact.
• Handling Multiple URLs:
• Create multiple routes in your React application to represent different pages
or views of the alumni website (e.g., home, alumni profiles,alumni).
• Implement navigation between these routes using <Link> components from
React Router DOM.
• Create a search feature in your alumni website to allow users to search for alumni profiles
based on specific criteria (e.g., graduation year, profession).
• Use query parameters to pass search criteria to the backend API request and fetch filtered
alumni profiles.
• Handling Page Not Found:
• Create a route in your React application to handle "Page Not Found" scenarios (hint: '*').
• Display a custom error message or a friendly UI component to inform users about the invalid
URL.