React Routing

Go Back

Level : Intermediate

Go Back

Mentor: Shailendra Chauhan

Duration : 00:04:00

Get Details

What is a React Router?

React Router is a library that enables dynamic client-side routing in React applications, allowing you to create Single-Page Applications (SPAs) with seamless navigation without full-page reloads.

Creating A React Router

To create a React Router, you start by installing the necessary package (react-router-dom) and then setting up a basic router in your main application component.

Example

// App.js
import { BrowserRouter as Router, Route } from 'react-router-dom';
// other imports and components
function App() {
 return (
  <Router>
   <Route path="/" component={Home} />
   {/* Other routes */}
  </Router>
 );
}
export default App;

React <RouterProvider>

The <RouterProvider> component is used to provide the router instance to the entire application. It's typically used in the main component of the app.

Example

import { RouterProvider } from 'react-router-dom';
// other imports and components
function App() {
 return (
  <RouterProvider router={ /* initialized router object */ }>
   {/* App content */}
  </RouterProvider>
 );
}
export default App;

React Router <Route>

The <Route> component is used to define routes and specify which component should be rendered for a particular URL path.

Example

import { Route } from 'react-router-dom';
// other imports and components
function App() {
 return (
  <Route path="/home" component={Home} />
  {/* Other routes */}
 );
}
export default App;

React Router Nested Routes

You can nest <Route> components to create nested routes within your application.

Example

<Route path="/products">
 <Route path="/:productId" component={ProductDetail} />
</Route>

React Router <Outlet>

The <Outlet> component is used within a parent route to specify where child routes should be rendered.

Example

function ParentComponent() {
 return (
  <div>
   <h2>Parent Component</h2>
   <Outlet />
  </div>
 );
}

React Router Index Route

The index route is used to render a specific component when the parent route's path is matched.

Example

<Route path="/dashboard" element={<Dashboard />} index />

Link

The <Link> component is used to create navigational links within your application.

Example

import { Link } from 'react-router-dom';
// other imports and components
function Navigation() {
 return (
  <nav>
   <Link to="/home">Home</Link>
  </nav>
 );
}

React Router <NavLink>

The <NavLink> component is a special version of <Link> that can be styled differently when active.

Example

import { NavLink } from 'react-router-dom';
// other imports and components
function Navigation() {
 return (
  <nav>
   <NavLink to="/home" activeClassName="active-link">Home</NavLink>
  </nav>
 );
}

URL Parameters

URL parameters allow dynamic segments in a route's path.

Example

<Route path="/user/:userId" element={<UserProfile />} />

useParams()

The useParams() hook is used to access the parameters from the URL within a component.

Example

import { useParams } from 'react-router-dom';
function UserProfile() {
 const { userId } = useParams();
 // Use userId in your component
}

Query Parameters

Query parameters can be used for filtering and searching.

Example

import { useLocation } from 'react-router-dom';
function ProductList() {
 const location = useLocation();
 const queryParams = new URLSearchParams(location.search);
 const category = queryParams.get('category');
 // Use category in your component
}

React Router <Navigate>

The <Navigate> component is used to navigate imperatively in response to some conditions.

Example

import { Navigate } from 'react-router-dom';
function Profile({ isAuthenticated }) {
 if (!isAuthenticated) {
  return <Navigate to="/login" />;
 }
 // Render the profile content
}

React Router useNavigate()

The useNavigate() hook is used to navigate imperatively within a component.

Example

import { useNavigate } from 'react-router-dom';
function Actions() {
 const navigate = useNavigate();
 return (
  <div>
   <button onClick={() => navigate('/home')}>Go Home</button>
  </div>
 );
}

React Router useSearchParams()

The useSearchParams() hook is used to access and manipulate query parameters.

Example

import { useSearchParams } from 'react-router-dom';
function SearchResults() {
 const [searchParams, setSearchParams] = useSearchParams();
 const query = searchParams.get('q');
 // Use query in your component
}

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.