1. Introduction to React Router
React Router is a library for handling routing in React applications. It allows your app to navigate between different components and views without a full-page reload, making the user experience seamless.
2. Basic Setup
Start by installing react-router-dom:
npm install react-router-dom
Set up basic routing using BrowserRouter, Routes, and Route:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const App = () => {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
};
export default App;
3. Nested Routing
For more complex apps, you can nest routes. Here’s how to set up nested routes in a parent component:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
const Dashboard = () => <h2>Dashboard Home</h2>;
const Profile = () => <h2>Your Profile</h2>;
const DashboardLayout = () => {
return (
<div>
<nav>
<Link to="/dashboard">Home</Link>
<Link to="/dashboard/profile">Profile</Link>
</nav>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="profile" element={<Profile />} />
</Routes>
</div>
);
};
const App = () => {
return (
<Router>
<Routes>
<Route path="/dashboard/*" element={<DashboardLayout />} />
</Routes>
</Router>
);
};
export default App;
4. Dynamic Routing
Dynamic routing allows you to pass parameters in the URL. Here’s how to define and access a dynamic route:
import { useParams } from 'react-router-dom';
const User = () => {
const { id } = useParams();
return <h2>User ID: {id}</h2>;
};
const App = () => {
return (
<Router>
<nav>
<Link to="/user/1">User 1</Link>
<Link to="/user/2">User 2</Link>
</nav>
<Routes>
<Route path="/user/:id" element={<User />} />
</Routes>
</Router>
);
};
export default App;
5. Protected Routes
To implement protected routes, you can create a custom PrivateRoute component:
import { Navigate, Outlet } from 'react-router-dom';
const useAuth = () => {
const user = { loggedIn: true }; // Replace with actual auth logic
return user && user.loggedIn;
};
const PrivateRoute = () => {
const isAuth = useAuth();
return isAuth ? <Outlet /> : <Navigate to="/login" />;
};
const App = () => {
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<PrivateRoute />}>
<Route path="" element={<Dashboard />} />
</Route>
</Routes>
</Router>
);
};
export default App;
6. Programmatic Navigation
Sometimes, you may want to navigate programmatically, like after a form submission. Use the useNavigate hook in React Router v6:
import { useNavigate } from 'react-router-dom';
const Login = () => {
const navigate = useNavigate();
const handleLogin = () => {
// Login logic here...
navigate('/dashboard');
};
return (
<div>
<h2>Login</h2>
<button onClick={handleLogin}>Login</button>
</div>
);
};
export default Login;
7. 404 Pages
Handle 404 (Not Found) errors by creating a catch-all route:
const NotFound = () => <h2>404 - Page Not Found</h2>;
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
};
export default App;
8. Performance Considerations
For large applications, lazy loading routes can improve performance. Here’s how to implement lazy loading with React.lazy() and Suspense:
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const App = () => {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
};
export default App;
Top comments (0)