首页 > react-router 是只能在浏览中起作用吧?

react-router 是只能在浏览中起作用吧?

我做了个实验,用 react + react-router + webpack 写了个SPA,包含一个 index 页面和一个about页面

  1. webpack-dev-server启动,本地访问 http://localhost:3000/about 是可以直接访问的

  2. 如果我把编译好的 index.htmlbundle.js 放到 Apache HTTP Server上,再直接访问 http:://localhost:3000/about 就访问不了了,但是先访问 http://localhost:3000/ ,在点击 about 菜单是可以到达 http:://localhost:3000/about 的

这个实验是否说明了,react-router 只是客户端路由,并不是服务端路由?那意味着,如果我把 index.htmlbundle.js 都放到CDN上的话,让域名指向CDN, 于是只能先访问根域名 http:://www.example.com/ 再点击 about 菜单,而无法直接访问 http://www.example.com/about 的,对吧?

感谢 @vimac 的回答,我总结一下答案:

  1. createHashHistory, createBrowserHistory, createMemoryHistory 这三种方案,常见的是第一种,纯粹是客户端路由,第二种最现代化,客户端和服务端的URL完全一致,但是在代码方面需要多点代码处理服务端路由。

  2. 我提这个问题的意图,原本是想把我的 index.htmlbundle.js 都放到CDN上,这样省钱,速度也快,不过这个部署方式,有个缺点,就是只能访问根域名 www.example.com, www.example.com/about 访问不了,会报出404错误,因为CDN不知道如何响应 www.example.com/about 这样的request

  3. 所以,如果你写的是一个SPA, 故名思议,只有一个页面,即只有一个入口,只允许用户用唯一的入口来访问,这时候你可以把index.htmlbundle.js 放到CDN上,然后把你的域名 www.example.com 指向CDN, 然后用户可以访问根域名来使用你的SPA, 然后用客户端路由浏览到www.example.com/about。 用户如果直接访问 www.example.com/about或者在浏览器里refresh, 都会404

  4. 如果你写的是一个SPA,但是你希望用户能够直接访问 www.example.com/about,那么你必须要启用服务端路由,即这时候你得改写你的代码,让 react-router 在服务端也运行起来,例如新增一个server.js,在里面使用react-router添加服务端路由,在这种情况下,部署的时候,仍旧可以把 bundle.js 放到CDN上,不过index.html 要放到 express server上,这时候你必须要启动一个 express服务器,根域名指向这个express服务器,CDN只是用来存放静态资源(css,js,png等),express server 是用来相应 HTTP请求的


react router有三种对于url的策略

  1. createHashHistory 基于锚点

  2. createBrowserHistory 基于真实的URL,客户端这里使用history.pushState();相关的API进行处理,详见: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

  3. createMemoryHistory 仅在内存记录,不反应URL中

你用的是2,这样的话需要服务器端也要做相应的处理,react-router官方也给了个服务端的例子:
https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#createbrowserhistory

可以看一下


那是因为webpack启动的服务只能接收 / 而不能接受 /blabla
你可以试着用nodejs启动,不管什么路径都返回index.html,应该就没问题了

最近做的需求也在用webpack,跟你一样的问题~

【热门文章】
【热门文章】