react-router-history详解

history 的三种形式

  • browserHistory
  • hashHistory
  • createMemoryHistory

区别

  • 使用hashHistory,浏览器上的url: /#/user/haishanh
  • 使用browserHistory,浏览器上的url:/user/haishanh

详解

  • 使用hashHistory,因为url中有#,所以从 /#/到 /#/user/haishanh, 浏览器不会发送请求,react-router会根据urlrender相应的模块
  • 使用browserHistory需要server端支持,浏览器从/ 到 /user/haishanh 会向服务端发送请求,所以服务端需要如下配置去处理每一个路由
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

如果你的服务器是nginx,请使用try_files,当在服务器上找不到其他文件时,默认指向index.html

server { 
  ... location / {
     try_files $uri /index.html 
  }
}

总结

  • 如果你的App是静态,没有服务端的话,只能用hashHistory,其他情况推荐使用browserHistory
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容