routes/#

The identifier for the entry point when the application uses Conventional Routing.

Conventional routing uses routes/ as the convention for the entry point and analyzes the files in the src/routes directory to obtain the client-side routing configuration.

Any layout.[tj]sx and page.[tj]sx under src/routes will be used as the application's routes:

1.
2└── routes
3    ├── layout.tsx
4    ├── page.tsx
5    └── user
6        ├── layout.tsx
7        └── page.tsx

Basic Example#

The directory name under routes will be used as the mapping of the route URL. layout.tsx is used as the layout component and page.tsx is used as the content component in the routing. They are the leaf nodes of the entire route. For example, the following directory structure:

.
└── routes
    ├── page.tsx
    └── user
        └── page.tsx

will generate two routes:

• /
• /user

Dynamic Routing#

If the directory name of the route file is named with [], the generated route will be used as a dynamic route. For example, the following file directory:

The routes/[id]/page.tsx file will be converted to the /:id route. Except for the /blog route that can be matched exactly, all other /xxx routes will be matched to this route.

In the component, you can use useParams to obtain the corresponding named parameter.

When using the loader function to obtain data, params will be passed as an input parameter to the loader function, and the corresponding parameter can be obtained through the attribute of params.

Layout Component#

In the following example, a common layout component can be added to all route components by adding layout.tsx:

.
└── routes
    ├── layout.tsx
    ├── page.tsx
    └── user
        ├── layout.tsx
        └── page.tsx

In the layout component, you can use <Outlet> to represent the child components:

import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';

export default () => {
  return (
    <>
      <Outlet></Outlet>
    </>
  );
};