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

标签 javascript apache reactjs react-router

我有一个用 react 构建的网站,它使用 react-router。对于某些路由,我想提供另一个页面或静态文件,但是由于所有请求都转发到 react 路由器,因此它不起作用。

例如

www.myapp.com/sitemap.xml
www.myapp.com/something.html



^ 这些链接第一次工作,但一旦我加载网站然后它就不起作用,因为所有请求都通过 react 路由器。

使其始终有效的任何解决方案。谢谢。

编辑

我正在使用配置为将所有请求重定向到 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 设置了这个项目,并通过快速服务器(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>

所以,我认为这应该很清楚它的作用;)

更新:

如果这是一个选项,您可以简单地输入 目标="_blank" <Link> 中的属性

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

关于javascript - 在使用 react 构建的网站中提供另一个(独立)页面或静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45782571/

相关文章:

javascript - 在匹配对象属性上联接两个数组

javascript - 如何将MySQL查询数据传递给JavaScript变量?

apache - 如何在不使用 URL 重定向的情况下将向 Apache 服务器发出的请求传输到 IIS 服务器?

javascript - 在React中映射数组时出错

javascript - 如何停止正在 Chrome 中调试的 JavaScript 程序?

javascript - 如何在 Javascript 中设置页面的基本 href?

php - php文件中的8个空格如何使apache崩溃?

php - 如何在 PHP 中使用 file_get_contents 修复 404 错误?

javascript - REACT 从嵌套 JSON 中获取属性

javascript - 使用ReactJS旋转图像预览