使用React/Laravel應用程序刷新頁面打破應用程序返回空白頁面

我有一個位於Laravel 5.4框架上的反應應用程序。我遇到的問題是，在頁面上刷新一個URL，例如https://app.com/ {url}/{slug}會中斷應用程序。使用React/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>

通過瀏覽器刷新頁面時顯示FilmsContainer部件工作正常，因爲我有路線Laravel配置返回主佈局無論何時通過此代碼點擊任何網絡路線時，都會保存React應用程序。

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的組成部分，例如：https://www.app.com/films/this-film-name。

然而，當我刷新這個網址的頁面，該反應應用程序中斷，返回在JavaScript控制檯中的錯誤：

Uncaught SyntaxError: Unexpected token <       app.js:1

當刷新上匹配的任何URL頁面的www.app.com/{route}/{slug} 模式，應用程序中斷並且不顯示任何內容，我所看到的只是瀏覽器中的空白頁面。

我使用browserHistory也設置在Laravel網絡路由文件等航線，如嘗試：

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

嘗試和匹配的路由分配額外參數和服務保存的主HTML文件應用。

這似乎沒有工作，我有點困惑，這是一個Laravel的問題？我有沒有反應路由器配置不正確？任何意見將不勝感激，謝謝！

來源

2017-07-18 Daniel Park

它看起來像我可能會從相對路徑調用app.js。像<script src="app.js"></script>等電影目錄中它實際上是調用https://www.app.com/films/app.js並獲得404，但Laravel從該https://www.app.com/films/app.js URL發送HTML，因此Uncaught SyntaxError: Unexpected token <錯誤。

來源

2017-07-26 18:02:19 Brad

-1

當React路由器正在逐頁更改瀏覽器URL時，全部在客戶端完成。您向服務器發送1請求index.html（或index.php），其餘由React Router負責。點擊該按鈕，更改網址，更改要顯示的內容，全部在index.html之內。

然而，當你刷新時，你正在向服務器發出一個新的請求來尋找這個奇怪的URL，它不知道如何處理 - 它只知道如何提供主文件index。我對PHP不太熟悉，但爲了解決這個問題，你只需要告訴你的服務器返回到你的主文件。 This post可能會引導你在正確的方向。當Laravel得到一個不知道如何處理的URL時，它應該回退到您的index文件中，該文件將被提供，然後在瀏覽器中React Router將處理路由。

來源

2017-07-18 04:15:22 rstumbaugh

正如我在問題中指出的，我已經有了所有路線都返回索引文件的地方。 –

使用React/Laravel應用程序刷新頁面打破應用程序返回空白頁面

回答

相關問題