react-router部署非静态

将基于react-router的webapp部署到在node.js服务器下运行的生产可以吗？ 除非首先加载index.html ，否则部署静态文件将阻止像server.com/about这样的链接工作。 人们可以通过使用HashRouter来解决这个问题，但是在这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(); 

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

Answer 2

不是最漂亮的解决scheme，而是像nginx一样parsingtry_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();