web-dev-qa-db-ja.com

Reactで構築されたWebサイトで別の（スタンドアロン）ページまたは静的ファイルを提供する

React-routerを使用する、reactで構築されたWebサイトがあります。いくつかのルートでは、別のページまたは静的ファイルを提供したいのですが、すべてのリクエストがリアクションルーターに転送されるため、機能しません。

例えば

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

^これらのリンクは初めて機能しますが、Webサイトをロードすると、すべてのリクエストがリアクションルーターを通過するため、機能しません。

常に機能するソリューション。ありがとう。

編集

私はすべてのリクエストを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);
}

Morecreate-react-appを使用してこのプロジェクトをセットアップし、エクスプレスサーバーで提供しています（ like this ）。他の静的ファイルを提供するためにそこに何らかの設定を行う必要があるかどうかはわかりません。

javascriptapachereactjsreact-router
22
Abhishek

これは動作するはずです：

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 = "_ blank"属性を入れることができます

これはUXの観点から見ればさらに良いです。これらのルートがメインアプリケーションの一部ではない場合、ユーザーはそのspecialページにアクセスした後にタブを切り替えることができるからです。

8
webdeb

ServiceWorker.jsの望ましくない動作です。以下のコメントを使用して、index.jsのReact proyectで動作するはずです

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

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

2
Angelo Giuseppe

/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>
0
dsunku

ページがReactjsアプリとまったく関係ない場合（つまり、別のディレクトリを使用する場合）、次のコードを使用してNodeレイヤーからルーティングできるため、構造がより直感的になります。

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

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である場合はファイルまたは何かを表示します。

0
corysimmons