在使用react构建的网站中提供另一个(独立)页面或静态文件

Question

我有一个使用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-反应,应用该项目,并通过快递服务的服务器它(像这样).我不确定我是否需要在那里进行一些设置以服务其他静态文件.

Answer 1

这应该工作:

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>

恕我直言,这是从UX的角度来看更好,因为如果这些路由不是您的主应用程序的一部分,用户可以在访问特殊页面后切换Tab .

Answer 2

简单地将静态文件放在sitemap.xmlReact 的public文件夹中并放在 index.html 旁边怎么样？

我认为这是最简单的方法。