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-react-app设置了这个项目，并通过快速服务器（like this）提供服务。我不确定是否需要在那里进行一些设置以服务其他静态文件。

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>

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

更新：

如果这是一个选项，您可以在<Link>

中添加 target =＆＃34; _blank＆＃34; 属性

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

Answer 2

ServiceWorker.js 的不良行为使用下面的评论并在您的React proyect的$(document).on('load ready',function(){ $('link[href="style2.css"]').attr('href',defaultStyleSheet ); });中进行更改，它应该可以使用

index.js

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

Answer 3

将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。

Answer 4

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

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

Answer 5

如果您需要/terms重定向到/terms.html，则下面的代码可用于反应路由器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>

Answer 6

简单地将CTest *test;之类的静态文件放在index.html边的React的CEvent(CTest &test): test(&test) {}文件夹中。

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

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

6 个答案: