rerumaccusamus

--- sidebar_position: 1 title: 定义路由 --- Modern.js 在运行时是一个 **Universal App（大统一应用）**——— 既有客户端部分，又有服务端部分。但是开发者对服务端部分是无感知的，不需要专门去为 Server 部分编写代码，只需要专注产品本身的业务逻辑开发即可。使用 Modern.js，开发者无需像传统的以服务端为中心的框架那样，手动定义路由映射关系。Modern.js 会自动为每一个[入口](/docs/guides/tutorials/c07-app-entry/7.1-intro) 生成一个 **服务端路由**。同时，在每一个入口下，开发者还可以定义 **客户端路由**，使每一个入口都成为一个独立的单页 Web 应用( SPA )。 ## 服务端路由服务端路由是由 Modern.js 根据入口以及配置生成的路由。Modern.js 会根据基于文件约定的**标识**，自动生成入口。Modern.js 支持3种**标识**： - [`App.[tj]sx` 文件](/docs/apis/hooks/mwa/src/app) - [`pages/` 目录](/docs/apis/hooks/mwa/src/pages) - [`index.[tj]sx` 文件](/docs/apis/hooks/mwa/src/index) 当 `src/` 目录下有**入口标识**，就认为这个应用是单入口的，`src/` 下的其他文件和目录，都会被视为入口内部的文件。如果 `src/` 目录下没有**入口标识**，那么 `src/` 目录的**下一级**目录里，如果有**入口标识**，这个目录就会被视为一个应用入口，这个目录下的其他文件和目录，都会被视为入口内部的文件。例如，以下目录结构： ``` . ├── src/ │ ├── .eslintrc.json │ ├── App.css │ └── App.tsx ``` `src/` 目录下包含 `App.tsx` 这个**入口标识**，将会生成一个单入口应用，对应的服务端路由为根路径 `/`。而以下目录结构： ``` . ├── src/ │ ├── contacts/ │ │ ├── App.css │ │ └── App.tsx │ ├── landing-page/ │ │ ├── App.css │ │ └── App.tsx │ └── .eslintrc.json ``` `src/contacts/` 和 `src/landing-page/` 目录下包含 `App.tsx` 这个**入口标识**，将会生成由入口名为 `contacts` 和 `landing-page` 组成的多入口应用，两个入口对应的服务端路由分别为 `/contacts` 和 `/landing-page`。 :::note 注当**入口名**和**项目名**（`package.json` 里的 `name`）相同时，会被认为是应用主入口，对应的服务端路由为根路径 `/`，即主入口对应的服务端路由不需要包含**入口名**这部分路径。 ::: :::info 补充信息可以通过配置项【[server.routes](/docs/apis/config/server/routes)】来修改默认生成的服务端路由。 ::: ## 客户端路由 Modern.js 的客户端路由基于 [React Router](https://reactrouter.com/) 实现，支持**自控式路由**和**约定式路由**两种写法。 :::tip 提示使用客户端路由，需要先确认 [`runtime.state`](/docs/apis/config/runtime/state) 配置已开启。 ::: ### 自控式路由使用 `App.jsx` 作为**入口标识**的入口，需要使用**自控式路由**。此时，开发人员需要手动引入 `Route` 等路由组件定义路由，下面是一个示例： ```tsx title="App.tsx" import { Switch, Route } from '@modern-js/runtime/router' export default () => ( <Switch> <Route path="/" exact={true}> <div>Hello Modern.js</div> </Route> <Route path="/info" exact={true}> <div>User info</div> </Route> <Route path="*"> <div>404</div> </Route> </Switch> ) ``` 上述代码将会生成两条客户端路由 `/` 和 `/info`，其余所有未匹配的 URL 都会返回 404。 :::tip 提示和直接使用 React Router 不同，这里不需要在 `Route` 组件外包裹 `Router` 组件，因为 Modern.js 会自动在根组件包裹 `Router` 组件。 ::: ### 约定式路由使用 `pages/` 目录作为**入口标识**的入口，客户端路由采用的是**约定式路由**：基于 `pages/` 目录下的文件名及文件路径自动生成路由信息。例如，下面的目录结构： ``` . ├── src/ │ ├── pages/ │ │ ├── _app.tsx │ │ ├── docs.tsx │ │ └── index.tsx │ └── .eslintrc.json ``` 将会自动生成 `/` 和 `/docs` 两条客户端路由，`/` 对应渲染的组件为 `index.tsx` 默认导出的组件，`/docs` 对应渲染的组件为 `docs.tsx` 默认导出的组件。`_app.tsx` 是下划线开头的文件，代表**约定式路由**中的一个特殊文件，为整个入口提供根组件，可以用于实现全局布局、公共 UI 等，详细使用请参考[这里](/docs/apis/hooks/mwa/src/pages#全局-layout)。又例如以下多入口的情况： ``` ├── src/ │ ├── contacts/ │ │ └── pages/ │ │ ├── _app.tsx │ │ ├── docs.tsx │ │ └── home.tsx │ ├── landing-page/ │ │ └── pages/ │ │ ├── _app.tsx │ │ ├── docs.tsx │ │ └── index.tsx │ ├── .eslintrc.json ``` `contacts` 入口生成 `/contacts/home`、`/contacts/docs` 两条路由；`landing-page` 入口生成 `/landing-page`、`/landing-page/docs` 两条路由。