react 的 browserHistory 模式，服务器不配置

SPA 项目基本上都会用到路由 router。react 还有 vue 对应有其路由插件。 react-router 还有 vue-router 都有 hashHistory 和 browserHistory 模式。这里大概说一下两者区别

大多数情况下，browserHistory 模式明显是优于 hashHistory 模式的，但 browserHistory 需要一定的配置

可以看出，hashHistory 不需要什么配置，但 browserHistory 需要服务端支持，这里简单说一下两种方式做支持，其它方式基本上都是类似

这里说明一下为什么要这样设置，browserHistory 模式下，URL 是指向真实 URL 的资源路径，当通过真实 URL 访问网站的时候（首页），这个时候可以正常加载我们的网站资源，而用户在非首页下手动刷新网页时，由于路径是指向服务器的真实路径，但该路径下并没有相关资源，用户访问的资源不存在，返回给用户的是 404 错误

通过上面所说的原理，简单起来说就是 browserHistory 模式下，需要每个路由下都要有对应的资源存在，就不会产生 404 错误，所以如果不借助服务端的话，又要实现这种模式，这种场景在自己不能配置服务器时候会碰到，例如把项目部署到 GitHub pages 上。那该怎么办呢

所以，我们的做法就是在每个 路由路径 下，都放置一个跟首页一样的 index.html

下面是做法，当然也是有各种方式的，都是可以类推的

假定我们有以下的路由设定，这里以 react-router 为例子

那么就可以路由路径为

接下来我们就把生成的 index.html 复制到这几个路径下就可以了

这样用户访问就不会出现 404 了，SPA 的功能也不受影响，为了方便我们可以把这个生成工具集成到 package.json

ok, 当我们运行 npm run build 时候，就会同时生成对应路径下的 index.html，这样就可以了完成我们所需要的功能了

看到这里，应该会有一个疑问，如果 routes 中有一些是不能穷举的路径要怎么办？例如 <Route path="posts/:id" component={Verify(Inbox)} />。这时候是没办法生成对应资源的

不过还是可以使用以下 hack 方式：

直接使用服务端 404 页面了，如果是用 GitHub pages 的话，我们可以直接生成一个 404.html 即可，直接把 404 页面弄成跟 index 内容一样，404 时候就是正常的内容页面，这时候页面功能是正常的，并且不需要前面的一堆做法了.

仍是SPA

需要用到 react-router-config 这个库，它可以根据 route 匹配到对应的组件，拿到当前route对应的组件是实现路由同步的关键，再通过组件的静态API方法获取接口数据

主要是在服务端通过组件的静态API方法获取接口数据后创建store，再通过 window. store = store 传递给前端

主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

服务端渲染的应用场景：一般只是对重要的页面，如首页才会做，可以提高首屏加载速度，利于SEO。其他页面实际上仍是CSR

预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。

1、SPA变为MPA

2、必须使用 History 路由，而不能使用 Hash 路由，所以对于没有做预渲染的页面往往需要服务器配置路由，如nginx 配置如下：

3、对于动态路由，如 /detail/:id ，是不支持的，不过可以换成 query 路由，如 /detail?id=

4、应用场景比较有限，能想到的就是骨架屏应用，比如首页，为了速度，我们会用一些骨架屏组件，如果不做预渲染，则骨架屏组件会等整个js文件加载完毕才开始渲染，体验不好。如果做了预渲染，则当html文件加载完毕时就会开始渲染了

以xammp为例

需要配置

1：本地C:\Windows\System32\drivers\etc下host文件，增加下图红线中内容，127.0.0.1为固定本地ip

2：xampp的目录下我这里是E:\xampp\apache\conf\extra的httpd-vhosts.conf文件中增加下面这个内容，注意域名需要跟上图的一样，然后里面的DocumentRoot是放build出来的文件的所在目录，这里注意需要是在xampp安装目录里，若不想放这里需要另外更改xammp默认目录位置，否则无权限访问会报错，设置方法自行百度这里不多说

3：设置所有dvademo.com下的子路径都跳回自身index.hmtl

这里需要在build根目录内添加一个.htaccess文件，可以网上搜一个或者用webstorm创建一个这种没有名字只有后缀的文件

内容如下

# use mod_rewrite for pretty URL support

RewriteEngine on

# If a directory or a file exists, use the request directly

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

# Otherwise forward the request to index.php

RewriteRule . index.html

4：完毕

---