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

IT技术 javascript apache reactjs react-router
2021-04-26 03:04:36

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

例如

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

^ 这些链接第一次有效，但是一旦我加载网站，它就不起作用，因为所有请求都通过react-router。

任何让它一直工作的解决方案。谢谢。

编辑

我正在使用配置为将所有请求重定向到 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，应用该项目，并通过快递服务的服务器它（像这样）。我不确定是否需要在那里做一些设置来服务器其他静态文件。

4个回答

这应该有效：

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 的角度来看更好，因为如果这些路由不是您的主应用程序的一部分，则用户可以在访问该特殊页面后切换选项卡。

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

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

如果您需要/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>

使用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 则显示文件或其他内容。

其它你可能感兴趣的问题
上一篇如何改善打印机可以成功打印的悬垂角度？ 下一篇将 3 毫米 ABS 灯丝转换为 1.75 毫米