react|react browserHistory 完整部署方案 reactbrowserHistory完整部署方案

目前主流项目方案基本都是采用SPA(单页应用)架构去做的那么url 基本是基于hash去做路由的. 这种不存在兼容性问题
为了url 清爽干净的体验可以替换成 history model 3大框架都有自己的配置方式 .如果基于react-router 4 可以使用官方提供的browserHistory去做。
【react|react browserHistory 完整部署方案】实现一个完整 history mode 需要以下步骤:
假设我们部署项目名webapp
部署后的首页 url为 http://www.xxx.com/webapp
1. 指定 basename
可以在 BrowserRouter 中进行指定

为了在非react组件中也能使用router 进行导航推荐将router 封装一个服务,
BrowserRouter 和 router服务选择其中一种即可.
router服务 : RouterHelper.js

import createHistory from 'history/createBrowserHistory'; export const history = createHistory( { // 基链接 basename: "/webapp", } );

这样在任意类中就可以引入router对象进行路由导航，这种方式下basename指定需要在 createHistory中配置.

import {history} from "@common/class/RouterHelper";

在需要使用的类地方可以导出使用。
一个完整的router服务的例子:

import {history} from "@common/class/RouterHelper"; const routes = [ { path: "/account/user", component: AccountManagerView, meta : {title : "账户列表"},}, { path: "/account/userDetail", component: AccountManagerDetailView, meta : {title : "账户详情"},},]; import {Router ,Route, withRouter, Switch } from 'react-router-dom' { routes.map((route,i)=>) } 找不到此页面} />

ps : 注意使用router 服务方式需要将history注入到 Router对象里面
2.nginx配置
将项目构建后部署到nginx 静态服务器上面