React Router`browserHistory`：我必须在服务器上渲染吗？答案

【问题标题】：React Router `browserHistory`: Do I have to render on server?React Router`browserHistory`：我必须在服务器上渲染吗？
【发布时间】：2017-09-23 06:54:19
【问题描述】：

我是 React 的新手，刚刚学习路由的工作原理。 hashHistory (/#/paths/like/this) 效果很好，但 browserHistory (/paths/like/this) 看起来好多了。显然，当我重新打开 URL 时，browserHistory 路径无法立即使用，因为浏览器请求的 /path/on/server 不存在。

问题是：我是否必须使用服务器端渲染（所谓的isomorphic rendering）才能使用/nice/paths并让用户直接打开页面，或者能够Ctrl+R页面并留在原处，或者有选项可以只保留client-side 渲染？

谢谢。

【问题讨论】：

标签： javascript reactjs redux frontend flux

【解决方案1】：

Mrinalmech 给出了正确答案，我只想为 Nginx 添加一个配置示例：

server {

    server_name yourHostName.com;
    listen 80;

    root /path/to/app/folder;
    index index.html;

    location ~ ^[a-zA-Z0-9/_-]+$ {
        rewrite (.*) /index.html last;
    }
}

【讨论】：

【解决方案2】：

不，您可以轻松使用client-side 渲染并允许用户使用nice/paths/ 之类的路径。

由于这些路由只是 React 的一种便利，并且不存在于服务器上，因此直接访问它们会引发错误，因为页面根本不存在。要解决这个问题，您应该将所有路由指向服务器中的index.html（您的应用程序的入口点），然后让 React 接管处理路径。

在 Express 中会这样：

app.get('*', function(req, res) {
    res.sendFile(__dirname + '/public/index.html')
})

对于 Apache 服务器，这将是 .htaccess：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

对于其他服务器端语言，它们有自己的方法，指向index.html 基本上适用于所有 SPA 框架，如 Angular 等，因为逻辑是相同的。

【讨论】：

谢谢，这很有道理。