我有一个用react构建的网站,它使用react-router。对于某些路由,我想提供另一个页面或静态文件,但由于所有请求都转发到 react 路由器,因此它不起作用。
例如
www.myapp.com/sitemap.xml
www.myapp.com/something.html
^ 这些链接第一次工作,但是一旦我加载网站,它就不起作用,因为所有请求都通过 react 路由器。
任何使其始终有效的解决方案。谢谢。
编辑
我正在使用apache服务器,它被配置为将所有请求重定向到index.html,我想这就是这种行为的原因。这是我的配置,但我不知道如何解决这个问题。
Options -MultiViews
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
更新 我尝试了答案中建议的解决方案。
我的路线看起来像这样,对于something.html我正在加载ServerLoad组件
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/about" component={About} />
<Route path="something.html" component={ServerLoad} />
<Route component={NoMatch} />
</Switch>
在 ServerLoad 组件的 componentDidMount 函数中我这样做了。但这不起作用。
componentDidMount() {
window.location.reload(true);
}
更多 我已经使用 create-react-app 设置了这个项目,并通过 Express 服务器( like this )提供服务。我不确定是否需要在那里进行一些设置来服务器其他静态文件。
最佳答案
这应该有效:
const reload = () => window.location.reload();
<Router>
// all your routes..
...
// Your special routes..
<Route path="/sitemap.xml" onEnter={reload} />
<Route path="/something.html" onEnter={reload} />
</Router>
所以,我认为这应该非常清楚它的作用;)
更新:
如果这是一个选项,您只需将 target="_blank" 属性放入 <Link>
中即可
恕我直言,从用户体验的 Angular 来看,这甚至更好,因为如果这些路由不是主应用程序的一部分,用户只需在访问特殊页面后切换选项卡即可。
关于javascript - 在使用 React 构建的网站中提供另一个(独立)页面或静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45782571/