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

你可能感兴趣的:(react-router-history详解)