Служить другую (отдельную) страницу или статический файл на веб-сайте, созданный с помощью реакции

У меня есть сайт, созданный с реакцией, который использует реагирующий маршрутизатор. Для какого-то маршрута я хочу обслуживать другую страницу или статический файл, но поскольку все запросы перенаправляются на реагирующий маршрутизатор, он не работает.

например

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

^ эта ссылка работает в первый раз, но как только я загружаю сайт, он не работает, так как все запросы проходят через маршрутизатор реакции.

Любое решение, чтобы оно работало постоянно. Благодаря.

Изменить

Я использую сервер Apache, который настроен на перенаправление всех запросов в index.html, я думаю, что это причина такого поведения. Это моя конфигурация, но я не знаю, как это исправить.

Options -MultiViews
RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Обновление Я попробовал решение, предложенное в ответе.

мои маршруты выглядят так: для чего-то. я загружаю компонент 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-реагировать на приложение и обслуживать его на экспресс-сервере (как это). Я не уверен, если мне нужно сделать некоторые настройки для сервера других статических файлов.

Ответы

Ответ 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>

IMHO это с точки зрения UX еще лучше, потому что, если эти маршруты не являются частью вашего основного приложения, пользователь может просто переключить Tab после посещения этих специальных страниц.

Ответ 2

Это нежелательное поведение ServiceWorker.js использует комментарий ниже и меняет его в index.js вашего React proyect, и он должен работать

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

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

Ответ 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>

Это будет соответствовать маршрутам, покажет 404, если не существует действительного href, и покажет файл или что-то, если это допустимый href.

Ответ 4

Если страницы вообще не связаны с приложением Reactjs (т.е. С использованием другого каталога), я думаю, что мы можем направить его со слоя Node, используя следующий код, чтобы структура была более интуитивной:

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

Ответ 5

Если вам нужно /terms для перенаправления на /terms.html, приведенный ниже код сработал для меня с Reaction-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>