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
}