我正在使用React-router，当我点击链接按钮时，它工作得很好，但当我刷新我的网页时，它没有加载我想要的东西。
例如，我在localhost/joblist和一切都很好，因为我到达这里按下一个链接。但如果我刷新网页，我会得到:
Cannot GET /joblist
默认情况下，它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist，他们工作得很好。但我不喜欢这种类型的URL，所以试图删除#，我写道:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
这个问题不会发生在localhost/，这个总是返回我想要的。
这个应用程序是单页的，所以/joblist不需要向任何服务器询问任何事情。
我的整个路由器。
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="joblist" path="/joblist" handler={JobList}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
我刚刚用Create React App做了一个网站，也遇到了同样的问题。
我使用react-router-dom包中的BrowserRouting。我在Nginx服务器上运行，添加以下到/etc/nginx/yourconfig.conf为我解决了这个问题:
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /index.html break;
}
}
如果你正在运行Apache，这对应于在.htaccess中添加以下内容:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
这似乎也是Facebook自己提出的解决方案。
使用HashRouter对我来说也适用于Redux。只需简单地替换:
import {
Router //replace Router
} from "react-router-dom";
ReactDOM.render(
<LocaleProvider locale={enUS}>
<Provider store={Store}>
<Router history={history}> // Replace here saying Router
<Layout/>
</Router>
</Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();
:
import {
HashRouter // Replaced with HashRouter
} from "react-router-dom";
ReactDOM.render(
<LocaleProvider locale={enUS}>
<Provider store={Store}>
<HashRouter history={history}> //replaced with HashRouter
<Layout/>
</HashRouter>
</Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();
产品堆栈:React, React Router v4, BrowswerRouter, Express.js, Nginx
User BrowserRouter for pretty URLs
File app.js
import { BrowserRouter as Router } from 'react-router-dom'
const App = () {
render() {
return (
<Router>
// Your routes here
</Router>
)
}
}
Add index.html to all unknown requests by using /*
File server.js
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
})
bundle Webpack with webpack -p
run nodemon server.js or node server.js
你可能想让nginx在服务器块中处理这个问题，忽略第2步:
location / {
try_files $uri /index.html;
}
