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

Posted 2023-02-21

【中文标题】在使用 react 构建的网站中提供另一个（独立）页面或静态文件

【英文标题】：Serve another(standalone) page or static file in website built with react

【发布时间】：2018-01-28 16:05:20

【问题描述】：

我有一个用 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(like this) 为其提供服务。我不确定我是否需要在那里做一些设置来服务器其他静态文件。

【问题讨论】：

您是否尝试过使用普通的<a href="/something.html"></a> 标签而不是 react-router Link 组件？

是的，我做到了，即使我手动粘贴 url（一旦我加载了网站），它也会响应路由器并且不加载任何内容。

你使用的是什么版本的 react-router？我正在使用 3.0.5，当我给它 方式时，它对我来说工作正常。你能分享你的代码片段吗？

我正在使用 react 路由器 4。我尝试设置 window.href.location 但那不起作用

在您的 htaccess 中为该特定文件创建一个例外 :)

【参考方案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>

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

【讨论】：

嗨，我试过了，检查有问题的更新。它不起作用

好的所以这个解决方案有效，但如果您注册了服务工作者，它可能无法工作properly。因为 Create-React-App 开箱即用地支持此功能，所以它在我的站点中启用。我禁用了服务人员，现在它可以工作了。

谢谢@webdeb

很高兴为您提供帮助。您能否深入探讨一下服务人员的问题？知道服务工作者运行时有什么区别会很有趣..

是的，我打算这样做，但现在我的日程安排很紧。我会更新的。

【参考方案2】：

这是 ServiceWorker.js 的不良行为，使用下面的评论并在您的 React 项目的 index.js 中更改它（如果您不需要服务工作者），它应该可以工作

import  unregister  from './registerServiceWorker';
unregister();

https://github.com/facebookincubator/create-react-app/issues/2715

如果您仍然需要 Service Worker 并且希望避免它出现这种行为，请考虑安装自定义 Service Worker，您可以在其中建立要忽略的路径白名单。有关更多信息，您可以查看下一个链接。

https://medium.com/swlh/how-to-implement-custom-service-worker-in-create-react-app-without-eject-bfa2c5f4ae96

【讨论】：

我遇到了同样的问题，这就是我建议这个解决方案的原因

您可以将其配置为免除 index.html 完成的请求，而不是取消注册您的服务 woerker。

【参考方案3】：

如果您需要 /terms 重定向到 /terms.html，下面的代码适用于 react-router 3.x。

const reload = () => window.location.reload();
<Router>
  <Switch>
    <Route exact path="/" component=Home />                
    <Route path="/terms.html" render=reload />
    <Route path="/privacy.html" render=reload />
    <Route path="/terms" render=() => <Redirect
        to=
          pathname: "/terms.html"
        
      /> 
    />
    <Route path="/privacy" render=() => <Redirect
        to=
          pathname: "/privacy.html"
        
      /> 
    />
  </Switch>
</Router>

【参考方案4】：

使用 Switch 结合 NoMatch 组件，结合 webdeb 的解决方案：

<Router>
  <div>
    <Switch>
      <Route exact path="/" component=Home />
      <Route exact path="/admin" component=Admin />
      <Route component=NoMatch />
      <Route onEnter=() => window.location.reload() />
    </Switch>
  </div>
</Router>

这将匹配路由，如果不存在有效的href，则显示404，如果是有效的href，则显示文件或其他内容。

【参考方案5】：

简单地将您的静态文件（如 sitemap.xml）放在 React 的 public 文件夹中的 index.html 旁边。

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

【参考方案6】：

如果页面与 Reactjs App 完全无关（即使用另一个目录），我认为我们可以使用以下代码从 Node 层对其进行路由，以便结构更直观：

app.use('/url_to_static_pages', express.static('path_to_static_files'));

【讨论】：

OP 没有提到任何关于使用节点的内容