react-router 部署非静态答案

【问题标题】：react-router deploying non-staticreact-router 部署非静态
【发布时间】：2017-11-14 16:55:20
【问题描述】：

是否可以将基于 react-router 的 webapp 部署到在 node.js 服务器下运行的生产环境中？部署静态文件会阻止像 server.com/about 这样的链接工作，除非首先加载 index.html。可以通过使用 HashRouter 来解决这个问题，但沿着这条路线走似乎是老派。

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './js/App';
import About from './js/About';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';

ReactDOM.render(
    <Router>
    <App>
        <Route path='/about' component={About} />
    </App>
  </Router>
    , document.getElementById('root'));
registerServiceWorker();

【问题讨论】：

标签： node.js reactjs react-router

【解决方案1】：

您可以使用 nginx 将任何路由（例如 server.com/about）回退到 index.html

例如

location ^~ / {
        alias /usr/local/theapp/dist;
        try_files $uri $uri/ /index.html;
        access_log /var/log/nginx/theapp/acces.web.log;
        error_log /var/log/nginx/theapp/error.web.log debug;
}

# assets
location ~ ^/.+\..+$ {
        try_files $uri =404;
       alias /usr/local/theapp/dist;
       error_log /var/log/nginx/theapp/error.web.log debug;
}

【讨论】：

这不起作用，因为所有路由现在都回退到index.html。当用户单击指向example.com/about 的链接时，我需要能够打开关于页面。
但是example.com/about 是什么？它是反应路由器路线吗？或者它是一个静态独立路由（例如，从节点 js 控制器服务）
example.com/about 是Route。
如果它是react-router 路由回退到索引反应路由器它自己应该为你处理/about 并加载正确的组件......你需要提供更多细节（代码）
react-router 在回退到索引后似乎没有处理路由。下面的黑客。不过，我已经用原始代码更新了帖子。感谢您的帮助。

【解决方案2】：

不是最漂亮的解决方案，但解决这样的问题与 nginx try_files $uri $uri/ /index.html; 一起解决问题。

class OnLoadHack extends Component {
  componentDidMount() {
    const { location, match, history } = this.props;
    if(process.env.NODE_ENV !== 'development' && !match.isExact){
        history.push(location.pathname + location.search)
    }
  }

  render() {
    return null
  }
}

ReactDOM.render(
  <Router>
    <App>
        <Route path='/' component={OnLoadHack} />
        <Route path='/about' component={About} />
    </App>
  </Router>
    , document.getElementById('root'));
registerServiceWorker();

【讨论】：