javascript - 手動で更新または書き込みを行うと、React-router の URL が機能しない

Question

React-router を使用しており、リンクボタンをクリックしている間は正常に動作しますが、Web ページを更新すると、必要なものが読み込まれません。

たとえばlocalhost/joblist、リンクを押してここに到着したので、すべて問題ありません。しかし、ウェブページを更新すると、次のようになります。

Cannot GET /joblist

デフォルトでは、このようには機能しませんでした。当初、私は自分の URL をlocalhost/#/andとして持っていましたが、localhost/#/joblistそれらは完全に正常に機能しました。しかし、私はこの種の URL が好きではないので、それを消去しようとして、次のよう#に書きました。

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

この問題はでは発生しませんlocalhost/。これは常に必要なものを返します。

編集:このアプリは単一ページなので/joblist、サーバーに何も要求する必要はありません。

EDIT2：ルーター全体。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

score 175 · Accepted Answer

ここでの回答はすべて非常に役に立ちます。私にとってうまくいったのは、ルートを期待するように Webpack サーバーを構成することでした。

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

historyApiFallback は、この問題を修正したものです。ルーティングが正しく機能するようになり、ページを更新したり、URL を直接入力したりできるようになりました。ノードサーバーでの回避策について心配する必要はありません。この回答は明らかに、webpack を使用している場合にのみ機能します。

編集:これが必要な理由の詳細については、こちらの回答を参照してください: https://stackoverflow.com/a/37622953/5217568

score 38 · Accepted Answer

index.htmlheadに、次を追加します。

<base href="/">
<!-- This must come before the css and javascripts -->

次に、webpack dev サーバーで実行するときに、このコマンドを使用します。

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

--history-api-fallback重要な部分です

score 33 · Accepted Answer

ルーターは、ナビゲーションがクライアントで発生するかサーバーで発生するかに応じて、2 つの異なる方法で呼び出すことができます。クライアント側の操作用に構成しました。キーパラメータは、run メソッドの 2 番目の場所である場所です。

React Router Link コンポーネントを使用すると、ブラウザのナビゲーションがブロックされ、transitionTo が呼び出されてクライアント側のナビゲーションが行われます。HistoryLocation を使用しているため、HTML5 履歴 API を使用して、アドレスバーの新しい URL をシミュレートすることにより、ナビゲーションの錯覚を完成させます。古いブラウザを使用している場合、これは機能しません。HashLocation コンポーネントを使用する必要があります。

更新を押すと、すべての React および React Router コードがバイパスされます。サーバーはリクエストを受け取り、/joblist何かを返す必要があります。runサーバーでは、メソッドが正しいビューをレンダリングするために、要求されたパスをメソッドに渡す必要があります。同じルートマップを使用できますが、おそらくへの別の呼び出しが必要になるでしょうRouter.run。Charles が指摘するように、URL 書き換えを使用してこれを処理できます。もう 1 つのオプションは、node.js サーバーを使用してすべてのリクエストを処理し、パス値を location 引数として渡すことです。

たとえば、エクスプレスでは、次のようになります。

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

リクエストパスがに渡されていることに注意してくださいrun。これを行うには、レンダリングされた HTML を渡すことができるサーバー側のビューエンジンが必要です。renderToStringサーバー上で Reactを使用および実行する際には、他にも多くの考慮事項があります。ページがサーバーでレンダリングされると、アプリがクライアントに読み込まれると、再度レンダリングされ、必要に応じてサーバー側でレンダリングされた HTML が更新されます。

score 18 · Accepted Answer

Webpack Dev Server には、これを有効にするオプションがあります。を開いてpackage.json追加し--history-api-fallbackます。このソリューションは私にとってはうまくいきました。

反応ルーターチュートリアル

score 15 · Accepted Answer

プロダクションスタック: React、React Router v4、BrowswerRouter、Express、Nginx

1) プリティ URL 用のユーザー BrowserRouter

// app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           // your routes here
        </Router>
    )
  }
}

2) を使用して、すべての不明なリクエストに index.html を追加します。/*

// server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3）webpackをバンドルするwebpack -p

4) 実行nodemon server.jsまたはnode server.js

編集: nginx にサーバーブロックでこれを処理させ、手順 2 を無視することもできます。

location / {
    try_files $uri /index.html;
}

score 10 · Accepted Answer

以下のコードを使用して、public フォルダー内に「.htaccess」ファイルを追加してみてください。

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]

score 8 · Accepted Answer

firebase を使用している場合は、アプリのルート (hosting セクション) にある firebase.json ファイルに rewrites プロパティがあることを確認するだけです。

例えば：

{ 
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]    
  }
}

これにより、他の誰かがフラストレーションと無駄な時間を節約できることを願っています.

幸せなコーディング...

この件についてさらに読む：

https://firebase.google.com/docs/hosting/full-config#rewrites

Firebase CLI: 「シングルページアプリとして構成する (すべての URL を /index.html に書き換える)」

score 5 · Accepted Answer

バックエンドで Express またはその他のフレームワークを使用している場合は、以下のように同様の構成を追加し、構成で Webpack パブリックパスをチェックアウトできます。BrowserRouter を使用している場合は、リロードしても正常に動作するはずです。

expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
});

score 4 · Accepted Answer

React Router（Apache）を使用したSPAのソリューションを見つけました。.htaccess に追加するだけです

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

ソース: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

score 4 · Accepted Answer

更新時または URL を直接呼び出したときの「cannot GET /URL」エラーを修正します。

このようなルートの特定のリンクを期待するようにwebpack.config.jsを構成します。

module.exports = {
  entry: './app/index.js',
  output: {
       path: path.join(__dirname, '/bundle'),
       filename: 'index_bundle.js',
       publicPath: '/'
  },

score 4 · Accepted Answer

私のものではありませんが、これをすべて読んでみてください：

https://www.andreasreiterer.at/fix-browserrouter-on-apache/

アプリのルーティングを修正する次に、最終的にルーティングを修正する方法を示します。アプリが存在する index.html にリクエストをリダイレクトするように Apache に指示するには、.htaccess ファイルを変更する必要があります。アプリのフォルダーにそのようなファイルがまだない場合は、作成してください。

次に、魔法のようにルーティングを機能させる 4 行を必ず挿入してください。

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

その .htaccess ファイルを index.html と同じディレクトリに配置すると、Apache は新しいリクエストをアプリに直接リダイレクトします。

おまけ: React アプリをサブディレクトリにデプロイする

たとえばhttps://myapp.com/the-appを介してアクセスできるように、アプリをサブディレクトリにデプロイしている場合、すぐに別の問題があることに気付くでしょう。新しいルートをクリックするたびに、URL がhttps://myapp.com/route-abcのようなものに変換されますが、これはリロード後に再び壊れます。しかし、それには簡単な修正があります：

BrowserRouter には、サブディレクトリパスを指定できる basename という prop があります。

これ以降、 /contacts のような各ルートは、 http://myapp.com/the-app/contactsのような URL になります。

score 2 · Accepted Answer

場合によっては、Laravel を使用した React JS SPA のソリューションを探している人がいます。 受け入れられた答えは、そのような問題が発生する理由の最良の説明です。すでに説明したように、クライアント側とサーバー側の両方を構成する必要があります。ブレードテンプレートに js バンドルファイルを含めます。必ずURL facadeこのように使用してください。

<script src="{{ URL::to('js/user/spa.js') }}"></script>

ルートで、ブレードテンプレートがあるメインエンドポイントにこれを追加してください。例えば、

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

上記は、ブレードテンプレートのメインエンドポイントです。オプションルートも追加して、

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

発生する問題は、最初にブレードテンプレートが読み込まれ、次に反応ルーターが読み込まれることです。そのため、'/setting-alerts'ロードすると、html と js がロードされます。ただし、をロード'/setting-alerts/about'すると、最初にサーバー側でロードされます。サーバー側では、この場所には何もないため、not found が返されます。オプションのルーターがある場合、同じページが読み込まれ、react ルーターも読み込まれ、react loader が表示するコンポーネントを決定します。お役に立てれば。

score 1 · Accepted Answer

私は.Net Core MVCを使用しているので、次のようなものが役に立ちました:

    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var url = Request.Path + Request.QueryString;
            return App(url);
        }

        [Route("App")]
        public IActionResult App(string url)
        {
            return View("/wwwroot/app/build/index.html");
        }
   }

Home/Index基本的に MVC 側では、一致しないすべてのルートはに指定されているとおりに分類されますstartup.cs。内部Indexでは、元のリクエスト URL を取得して、必要な場所に渡すことができます。

startup.cs

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });

score 1 · Accepted Answer

react-router-domフロントエンドとルーティングに React を使用していたときに、Electron でこの問題に直面していました。に交換BrowserRouterしHashRouterて直りました。ここに簡単な例があります

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

score 1 · Accepted Answer

私の場合、パラメーターを使用しているときにURLが読み込まれませんでした。

<base href="<yourdomain/IP>"></base> 簡単な修正として、ビルドフォルダー内の index.html ファイルのタグの下に追加します。

そして、これは私の問題を解決しました。

score 1 · Accepted Answer

ASP.NET CoreとReactを使用しています。運用環境での手動ルーティングとルートの更新の問題の解決策は、運用サーバーでルーティングを構成する ASP.NET Coreのメインプロジェクトweb.configのルートにファイルを作成することでした。

プロジェクト内のファイルの場所:

web.configファイルの内容:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Rewrite Text Requests" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{HTTP_METHOD}" pattern="^GET$" />
                        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

score 0 · Accepted Answer

すぐに URL にリダイレクトしている場合でもデータを要求するもう 1 つの方法は、すべてのコンポーネントに /about/ testのような最後のパラメーターを呼び出すメソッドを持たせ、状態プロバイダーに必要なコンポーネントに接続する関数を持たせることです。でデータをリクエストする

javascript - 手動で更新または書き込みを行うと、React-router の URL が機能しない

53 に答える 53

Related

Reference