Step 2: Create Individual Components

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;




<p><strong>About.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

Dynamic Routing with React Router v6

To handle dynamic routes, such as a user profile page where the user ID is part of the URL, React Router v6 provides the useParams hook.

Step 1: Define a Dynamic Route

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

Explanation:

• :userId is a dynamic segment in the route path. The useParams hook allows you to access the value of userId in the UserProfile component.
• When you navigate to /user/123, the UserProfile component will render and display the userId as 123.

Nested Routes in React Router v6

Nested routes allow you to build complex layouts by defining sub-routes within parent routes.

Step 1: Define Parent and Child Routes

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

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

Explanation:

• The Dashboard component contains nested routes for overview and settings.
• The /* in the parent route ensures that all child routes are handled under /dashboard.

React Router v6 Hooks

React Router v6 introduces several hooks for navigating and accessing routing information:

1. useNavigate: Programmatically navigate to different routes.
2. useParams: Access dynamic URL parameters.
3. useLocation: Get information about the current location (URL).
4. useMatch: Matches the current URL to a given route.
5. useResolvedPath: Resolve a path to an absolute URL.

Example: useNavigate Hook

The useNavigate hook allows programmatic navigation within your application.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

React Router v6 Best Practices

• Exact Matching by Default: React Router v6 matches routes exactly by default, making it easier to handle route matching without needing to specify exact.
• Use element Prop: Pass JSX directly to the element prop instead of using the component prop, simplifying your code and reducing the need for render functions.
• Nested Routing: Use nested routes to build complex page layouts with child routes, keeping your code modular and maintainable.
• Handle 404s with Wildcard Route: Use the wildcard * to catch all unmatched routes and display a 404 page or redirect users to a default route.

Conclusion

React Router v6 introduces several improvements over previous versions, including a simpler API, better route matching, and enhanced support for dynamic and nested routes. By leveraging hooks like useNavigate, useParams, and useLocation, you can build powerful and flexible routing systems in your React applications.