React/Laravelアプリケーションブレークでページをリフレッシュすると、空白ページが返されます

Question

私はLaravel 5.4フレームワークに載っている反応アプリケーションを持っています。 私が抱えている問題は、URLがhttps://app.com/ {url}/{slug}のようなページをリフレッシュするとアプリケーションが壊れることです。ここで

は私がルートを持っているように表示されFilmsContainerコンポーネントが正常に動作する場合Laravelはメインレイアウトを返すように設定するためにブラウザを介してページを更新App.js

<Router> 
    <div className="App__container container-fluid"> 
    <Navigation /> 
     <Switch> 
     <Route path="/films" component={FilmsContainer}/> 
     <Route path="/films/:slugname" component={FilmPage}/> 
     </Switch> 
    </div> 
</Router> 

に座っている私のルータコンポーネントでありますここでこのコードを使ってWebルートにアクセスするたびに、Reactアプリケーションを保持します。 https://www.app.com/films/this-film-name：

Route::get('{slug}', function() { 
    return view('main'); 
})->where('slug', '(?!api)([A-z\d-\/_.]+)?'); 

しかし、このリンク・コンポーネントがヒットしたときに問題が最初のクリックで

<NavLink className="btn btn-success" to={`/films/${slugName}`}>View Film</NavLink> 

、来て、ルータが正常例えば、正しいURLを持つコンポーネントを描画反応します。私はこのURLでページを更新するとき

しかし、インクルードは、アプリケーションのブレークは、 はJavaScriptコンソールでエラーを返す反応：

Uncaught SyntaxError: Unexpected token <       app.js:1 

一致する任意のURLでページを更新www.app.com/{route}/{slug} パターンでは、アプリケーションが途切れて何も表示されないので、ブラウザに空白のページが表示されます。

私のような、browserHistoryを使用してみましたし、また、Laravelウェブルート・ファイルで他のルートを設定しました：試してみて、一致するルートに余分のparamsをして保持するメインhtmlファイルを提供するために

Route::get('films/{slug}', function() { 
    return view('main'); 
})->where('slug', '(?!api)([A-z\d-\/_.]+)?'); 

応用。

これは機能していないようですが、私は少し混乱しています。これはLaravelの問題ですか？反応ルータが正しく設定されていませんか？どんなアドバイスも大歓迎です、ありがとう！

Answer 1

app.jsを相対パスから呼び出すように見えます。 <script src="app.js"></script>のようにフィルムディレクトリに実際にhttps://www.app.com/films/app.jsと404を取得していますが、LaravelのHTMLをhttps://www.app.com/films/app.jsというURLから送信するので、Uncaught SyntaxError: Unexpected token <というエラーが発生します。

Answer 2

React RouterがブラウザURLをページごとに変更すると、クライアント側ですべて完了します。サーバにindex.html（またはindex.php）の1つの要求を行い、残りはReact Routerが処理します。ボタンをクリックし、URLを変更して、表示するコンテンツを変更します。すべてindex.html以内です。

しかし、リフレッシュすると、この奇妙なURLのためにサーバーに新しい要求をしています。処理方法はわかりません。メインのindexファイルを提供する方法しか知りません。私はPHPにあまり慣れていませんが、これを修正するには、サーバーにメインファイルにフォールバックするよう伝える必要があります。 This postはあなたを正しい方向に導くかもしれません。 Laravelが処理する方法を知らないURLを取得した場合、それはあなたのindexファイルに返されます。これがブラウザに送られ、ブラウザのReact Routerがルーティングを処理します。