Understanding React Router Basics: Managing Navigation in React

Example:

   import { Link } from 'react-router-dom';

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

1. useNavigate:
   • The useNavigate hook is used to programmatically navigate to different routes.
   • This hook is typically used inside event handlers or side effects.

Example:

   import { BrowserRouter } from 'react-router-dom';

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

Basic Routing Example

Here’s a basic example that demonstrates React Router in a functional React app:

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

Explanation:

• The BrowserRouter component wraps the entire app to enable routing.
• The Link component is used to create navigation links that don’t trigger page reloads.
• The Routes component contains all the routes, and each Route element maps a URL path to a component (e.g., Home, About, or Contact).
• Clicking the Link will update the URL and render the corresponding component.

Nested Routing

React Router also supports nested routes, allowing you to define routes within other routes.

   <Route path="/" element={<Home />} />

Explanation:

• The /dashboard route has nested routes: /dashboard/profile and /dashboard/settings.
• By using the * wildcard in the parent route (path="dashboard/*"), React Router knows to render the child routes inside the Dashboard component.

Redirecting with Navigate

You can programmatically navigate users to different routes using the Navigate component or the useNavigate hook.

   import { Link } from 'react-router-dom';

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

Explanation:

• The Navigate component will automatically redirect the user to the /about route when rendered.

Route Parameters

You can define dynamic routes by including route parameters, which can be used to pass values in the URL.

   import { useNavigate } from 'react-router-dom';

   const Login = () => {
     const navigate = useNavigate();

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       <button onClick={handleLogin}>Login</button>
     );
   };

Explanation:

• The :userId in the route path is a route parameter.
• The useParams hook is used inside the UserProfile component to extract the value of userId from the URL and render it on the page.

Conclusion

React Router makes navigating between views in a React application easy and efficient. With its components like BrowserRouter, Route, Link, and hooks like useNavigate, you can create dynamic, single-page applications with complex routing logic. By understanding the basics of React Router, including handling routes, nested routes, and route parameters, you can easily manage navigation in your React apps.

The above is the detailed content of Understanding React Router Basics: Managing Navigation in React. For more information, please follow other related articles on the PHP Chinese website!