How to create a new page

To create a new route, simply add a file to the src/pages directory, then navigate to src/routes/Router.jsx to define your new route.

Creating a new page /contact-us

1. To create a new page, navigate to the src/pages directory and create your new file: src/pages/contact-us.jsx

   const ContactUs = () => {
     return <h1>Contact us</h1>;
   };
   
   export default ContactUs;

2. Navigate to the src/routes/Router.jsx file and add your new page route:

   const routes = [
     {
     path: "contact-us",
     element: <ContactUs />,
     }
   ]

/contact-us route will be created.

TIP

We recommend using React Router's lazy loading feature to minimize bundle size, resulting in faster load times and enhanced performance.

Dynamic URL /users/<id>

Dynamic routes are represented by square brackets. Directories and pages can be dynamic.

Creating dynamic routes is a breeze! 😅 For example, to develop a dynamic route like /products/<id>, where id can be any integer, simply follow these steps:

1. Create a new directory called products within the src/pages directory, and then add a new file named id inside that directory.

   📂 pages
   └── Products.jsx

2. Place the following content inside the Products/Router.jsx file:

   const Products = () => {
   const { id } = useParams();
   
     return (
       <div>
         <h1>Products</h1>
         <p> product id: {id}</p>
       </div>
     );
   };
   export default Products;

3. Place the following content inside the src/routes/Products.jsx file:

   const routes = [
     {
     path: "products/:id",
     element: <Products />,
     }
   /* ... */
   ]

Now, if you navigate to /products/1 it will render product id: 1.

Note that the : in the :id URL segment means Dynamic Segment.

404 page - Catching all routes

We provide users with a customizable notice when they enter an incorrect URL, such as a 404 page, ensuring a user-friendly experience.

  const routes = [
    {
        path: "*",
        element: <NotFound/>,
    },
    /* ... */
]

The content in src/pages/Errors/404.jsx file will be presented when you visit any URL you haven't built.

Using different layout

By default, the pages you create will be displayed in the Default layout (src/layouts/Default.jsx), which features a header and vertical navigation. However, you can opt for another predefined or custom layout from this directory.

To keep application bundles small and support code-splitting for our routes, we use React Router lazy loading for components.

To do this, Update your file as follows:

const routes = [
    {
        element: <DefaultLayout/>,
        children: [
            {
                path: "home",
                lazy: () => import('./YourComponent'), // lazy loaded component
            }
        ]
    },
    {
        element: <Error/>,
        children: [
            {
                path: "400",
                element: <BadRequest/>,
            },
            {
                path: "403",
                element: <Forbidden/>,
            }
        ]
    }
]

Route Handles

Route handles in React Router simplify sharing data and functions across nested routes, improving code organization and flexibility.

const routes = [
    {
        path: "yourPath",
        lazy: () => import('./Component'), // lazy loaded component
        handle: {
            noBackToTop: Boolean, // Determines whether the 'Back to Top' button should be displayed on the page
            fixedHeight: Boolean, // Applies fixed-height styles to the page content, such as in email and chat pages.
            excludeAnimation: Boolean, // Checks whether the route should include transition animations.
            navActiveLink: String, // navActiveLink is an attribute that keeps a navigation link active for related sub-pages.
           // For example, when you’re on the TicketDetails page at (/ticket/:id), the ticket nav item (/ticket) remains active in the sidebar, showing that you’re still within the Ticket section.
        }
    }
]