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

Question

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

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

谢谢。

Answer 1

不，您可以轻松使用 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 等，因为逻辑是相同的。

Answer 2

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;
    }
}

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

React Router `browserHistory`: Do I have to render on server?

javascript

reactjs

redux

frontend

flux