%20(2).svg)
项目简介
本项目基于 React Router Controller 实现，该框架受 PHP Yii 框架启发，借助 react-router@4.x.x 的动态路由能力，达成根据 URL 动态渲染页面的功能。它作为 MVC 中的 VC 部分，与 React（View）和 Controller（C）搭配，再结合 redux 或者 mobx 可构成完整的 MVC 模式，让开发者能专注于业务逻辑。
项目的主要特性和功能
特性
- 无路由配置：避免了复杂的路由配置过程。
- 后端控制器模式：思路清晰，符合 MVC 架构，便于开发和维护。
- 动态路由：可根据 URL 动态渲染页面。
功能
- URL 参数解析：能按规则解析 URL 中的 controllerId、viewId 和路由参数。
- Controller 文件查找：依据 URL 中的 controllerId 查找对应的 Controller 文件。
- View 组件渲染：通过 Controller 中的 view 函数渲染相应的 View 组件。
- 404 页面处理：可自定义 404 页面。
- 首页设置：能设置首页跳转路径。
- 热替换支持：结合 react - hot - loader 实现热替换。
- 插件支持：如 i18n 插件，可实现国际化。
安装使用步骤
安装依赖
假设已下载项目源码文件，在项目根目录下打开终端，执行以下命令安装依赖：
bash
npm install
配置文件
配置 Controller
在 demo/src/container.js 中配置 Controller，示例如下：
```js
import React from 'react';
import Controller, { BrowserRouterController } from 'react-router-controller';
import nopage from './view/nopage';
Controller.set({
readViewFile(viewId) {
return import(./view/${viewId}/index.js).then(component => {
return component.default;
});
},
readControllerFile(controllerId) {
return import(/ webpackMode: "eager" /
./controller/${controllerId}.js)
.then(controller => {
return controller.default;
})
.catch(e => {
return false;
});
},
NotMatchComponent: nopage,
indexPath: '/main/index',
});
export default function container(props) {
return (
配置插件（以 i18n 为例）
在 Controller.set 中配置插件：
js
Controller.set({
plugins: [
i18n(language => {
return import(`./i18n/${language}.js`).catch(e => {
console.log(e);
return false;
});
}, require('./i18n/zh_CN').default),
]
})
运行项目
在终端执行以下命令启动项目：
bash
npm start
访问项目
在浏览器中输入 http://localhost:8000 即可访问项目，通过不同的 URL 路径访问不同的页面。例如：http://localhost:8000/main/about 。
兼容性处理
由于 IE 不支持 promise，若需兼容 IE9 及以上版本，需引入 polyfill.js：
js
import 'react-router-controller/libs/polyfill'
若已有相关的 promise polyfill，则无需引入。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】