Question

我是React的新手，只是学习路由的工作原理。 hashHistory（/#/paths/like/this）效果很好但browserHistory（/paths/like/this）看起来好多了。显然，当我重新打开网址时，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;
    }
}

反应路由器`browserHistory`：我是否必须在服务器上渲染？

2 个答案: