我有一个使用React构建的网站,该网站使用react- router。对于某些路由,我想提供另一个页面或静态文件,但是由于所有请求都已转发给路由器,因此它不起作用。
例如
www.myapp.com/sitemap.xml www.myapp.com/something.html
^这些链接第一次起作用,但是一旦我加载网站,它就不起作用,因为所有请求都通过反应路由器进行。
任何使其始终可用的解决方案。谢谢。
编辑
我正在使用配置为将所有请求重定向到index.html的apache服务器,我想这就是这种行为的原因。这是我的配置,但我不知道如何解决。
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 server(像这样)提供了服务。我不确定是否需要对服务器上的其他静态文件进行一些设置。
这应该工作:
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>
<Link>
恕我直言,这从UX角度来看甚至更好,因为如果这些路由不是您的主应用程序的一部分,则用户可以在访问该 特殊 页面后仅切换Tab 。