我正在使用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);
});
如果试图从IIS虚拟目录(不是网站的根目录)服务React应用程序:
在设置重定向时，'/'不会单独工作。对我来说，它也需要虚拟目录名。下面是我的网页配置:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<defaultDocument>
<files>
<remove value="default.aspx" />
<remove value="iisstart.htm" />
<remove value="index.htm" />
<remove value="Default.asp" />
<remove value="Default.htm" />
</files>
</defaultDocument>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/YOURVIRTUALDIRECTORYNAME/" />
</rule>
</rules>
</rewrite>
<directoryBrowse enabled="false" />
<httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
<remove statusCode="500" subStatusCode="100" />
<remove statusCode="500" subStatusCode="-1" />
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="403" subStatusCode="18" />
<error statusCode="403" subStatusCode="18" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
<error statusCode="404" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
<error statusCode="500" prefixLanguageFilePath="" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
<error statusCode="500" subStatusCode="100" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
</configuration>
除了网络。配置文件，React应用程序本身需要一些改变:
在文件包中。Json，你需要添加一个'主页'条目:
{
"name": "sicon.react.crm",
"version": "0.1.0",
"private": true,
"homepage": "/YOURVIRTUALDIRECTORYNAME/",
"dependencies": {
...
我将basename添加到我的浏览器历史对象中，并将其传递给路由器以访问历史:
import {createBrowserHistory } from 'history';
export default createBrowserHistory({
//Pass the public URL as the base name for the router basename: process.env.PUBLIC_URL
});
我还在我的React路由器文件App.js中添加了这个属性:
<Router history={history} basename={process.env.PUBLIC_URL}>
最后，在index.html文件中，我在'title'标签上方添加了以下选项卡:
<base href="%PUBLIC_URL%/">
也许有些步骤是不需要的，但这似乎已经完成了我的工作。我不知道如何设置它运行在一个站点的根目录或虚拟目录，而不需要重新编译，作为包中的主页。据我所知，json不能在构建后交换。
使用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();
