路由器url重定向

本篇文章给大家谈谈umi中的路由重定向，以及路由器url重定向对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、umi build 路由问题

2、umi框架的使用

3、UMI针对特定页面指定模板

4、umi+ts入门问题总结

umi build 路由问题

UmiJS 

DvaJS 

这两个是可以配套使用的,很棒,将React关于或许不能说最复杂,但能说最繁琐的react-redux+redux-saga+react-router-dom+actionCreater+actionTyep这一套东西融合了.

DvaJS做融合,UmiJS做脚手架.

真的是非常感谢他们所做的一切.

但是官方文档有点很尴尬.....

这次是关于Antd上和UmiJs上关于脚手架启动问题的.

Antd  这个也没按上说,

umi的项目创建通过 

来创建.

而UmiJS的创建通过

然后通过umi命令安装

我选择的是第一个创建方法,随便在page创建了几个page后,我并没有通过umi build来部署,而是使用yarn build.(其实yarn build在package.json中指向的就是umi build)

然后看UmiJS的部署方法

但是包括控制台都一直在报错.说找不到umijs和umicss文件.

通过网上的说法,我将umihtml文件的引用,添加从/修改为./ 很好,首页显示出来了

但是路由没有了.我根本无法访问除了首页外其他页面,但是dev环境下是ok的.

于是我这么试了试...

Have a Nice Day~

umi框架的使用

umi官方文档

对比以往使用的 create-react-app 搭建react项目，根据需要我们还得集合webpack打包，或者引入redux状态管理器等，而umi ---

通过 create-umi提供脚手架能力，

然后我们可以选择需要生成的项目类型：

确定后，会根据选择自动创建好目录和文件

安装依赖， yarn start 启动项目。

umi 以路由为基础的，支持类 next.js 的 约定式路由 ，以及各种进阶的路由功能，并以此进行功能扩展，比如支持 路由级的按需加载 。

(1) 无需手动配置路由

根据pages目录自动生成路由配置，会根据 src / pages 下 文件名自动生成路由

（也可以配置.umirc.js中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析）

(2) 其他基础知识：

(3)常用的路由操作

(1)全局layout

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。

比如：

(2)不同的全局layout

可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。

比如想要针对 /login 输出简单布局:

(3)尝试

要求： 登录页和首页显示不同的布局

同样对 location.path 做区分，但是如果是动态路由或者嵌套路由这样的匹配是有漏洞的。

优化后：

配置路由对应的布局，默认使用NavigatorLayout

根据正则判断

用之前先把mock使用示例看看== mock.js文档

(1)在umi中使用mock：

UMI针对特定页面指定模板

最近在使用UMI进行项目的构建，由于项目需要多个页面，每个页面都需要有特定的HTML模板。

根据 UMI 官方文档：

新建 src/pages/document.ejs ，umi 约定如果这个文件存在，会作为默认模板，比如：

模板里可通过 context 来获取到 umi 提供的变量， context 包含：

通过配置路由的 document 属性，指定路由特定的 document 。

此功能需开启 exportStatic 配置，否则只会输出一个 HTML 文件。

查阅 UMI3.x路由文档 ， routes 并不存在 document 属性，此方法无效。

约定式路由可通过注释扩展 document 属性，路径从项目根目录开始找

这个路由就会以 ./src/documents/404.ejs 为模板输出 HTML。

查阅 UMI3.x约定式路由文档 ，并未找到此方法，同时也尝试过，此方法无效。

维持一个 document.ejs ，在此模板的基础上，使用 context 进行模板区分

通过 context.route.patch 获取到当前路由，再使用 if-else 语句判断

注意：使用这方法需要 exportStatic: { htmlSuffix: false } ，只输出一个html，访问的路由变成 /a.html 变成 /a

umi+ts入门问题总结

React的变化很快，在我之前用习惯了直接hashHistory、browserHistory，而react-router4改变后就不习惯了，索性就直接使用了阿里的umijs。

下面是我学习umi过程中的一些心得。

学习前端框架，直接看官方文档是最好的学习方法 umi官方文档链接 ，但是总的来说，其实umi官方文档写的教程并不是很详细，它可能面向的是基础比较好的前端开发者的。但是，你的问题都是可以在其github项目的issue中找到解答的，我这里找了一个能解决我好多问题的网友总结的 issue链接 。

首先还是说一下umi的优点：我个人体会最显著的是，不需要你配置很多其他的参数，不需要你手动写react-router，因为其默认的pages下的文件夹名字就直接是路由的路径，也不需要你自己配置dll，因为内部直接内置了dll。同时umi默认使用dva代替react-redux，dva可以说是一个零api的数据流方案。

再一来说一说我只有redux-thunk和比较老版本react基础的在学习umi+dva+ts技术栈过程中碰到的几个问题：

1、effects和reducer的调用重名问题

一般来说，修改state的时候使用reducer，其他时候都用effects，如果名称一样，在dva@2后，只有effect会调用，所以两个不能重名

2、在有状态组件中，已经绑定mapStateToProps，但是this.props中的属性无法被读取

这个是ts的问题，我在stackoverflow上提的问题如链接： 我的提问 ，本质上是使用组件范型的方式解决问题。这一点在 Hello React and TypeScript 中也提到了。

3、less module使用问题

本来umi默认配置是支持less，但是我使用umi2.6.12自带的脚手架进行配置，根目录下的typings.d.ts中少了 declare module '*.less'; ，导致less无法作为模块导入。

4、antd Button控件报错

这个问题已经被修复，这里贴出我原本提问的链接： 我的提问 ，该问题已经被解决，只需要更改@types/react的版本就可以。

5、layout问题

其实我对umi框架的layout还不是很理解很熟悉，但是如果想要某些页面禁止使用一些layout，只需要判断 props.location.path 属性进行一些选择就可以了：

6、项目无法上传到git

我在 git commit 这一步的时候，会提示一些错误，但是不影响项目运行，其中比较烦的就是提示一些标签没有self-closing，我使用的antd的Menu.Item都让我自闭合那是不可能的，我怎么在Item中填我的Menu值呢？所以我采取了一种比较暴力的手段——每次上传项目的时候都禁用package.json文件的scripts属性中的 "precommit": "lint-staged" ，就可以上传成功了。可能有其他更好的手段解决，但是我图方便就这样进行了项目的上传。

7、路由跳转

这个其实不是我碰到的问题，但是umi的路由跳转真的很方便！我最常用的两种跳转方式有：一是使用 import router from 'umi/router ，然后直接router.push就可以，第二种是 import { routerRedux } from 'dva/router' ，然后routerRedux.push就可以进行跳转。这两种跳转可以说是满足了我做的项目的所有需求，不需要手动写一个Provider，也不需要react-router4后对于browserHistory的繁杂配置，直接可以进行解决。

8、props属性上不存在dispatch问题

这其实是一个ts的问题，在tsx文件中，props.dispatch是需要规定类型的，如果嫌麻烦可以在头上使用any,any的形式来表示比如： class xxx extends React.Componentany,any{ 这样就可以解决props.dispatch问题了

这个问题还有个解决的方法，就是在tsconfig.json文件中，设置 "noImplicitAny":false ，这样就可以设置默认any类型了，但是这样对ts支持不太好，推荐上面的方法。

关于umi中的路由重定向和路由器url重定向的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。