Defining Catch-All Routes

Provide an example of creating catch-all routes to match dynamic route patterns including multiple segments with the new App Router.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// Define a catch-all route using '*' at the end of the path
const router = createBrowserRouter([
    {
        path: '/app/*',
        element: <AppLayout />, // Replace with your app layout component
        children: [
            {
                path: '*', // Catch-all route
                element: <NotFound />, // Replace with your Not Found component
            }
        ],
    },
]);

function App() {
    return (
        <RouterProvider router={router} /> // Set up the router provider
    );
}

export default App;

This code creates a React Router configuration using 'createBrowserRouter' with a catch-all route. The catch-all is defined by including '*' at the end of a path, in this case, '/app/*'. Any non-matched routes within '/app/' will render the 'NotFound' component inside 'AppLayout'.