如果 react-router-dom 不匹配任何路由，則頁面重新加載

Question

我們正在使用帶有 Razor 視圖（純后端堆棧）的 dotnet 編寫一個項目。 我們計划使用react-router-dom將每個視圖移動到React來處理客戶端和服務器中的路由。

我們的想法是一頁一頁地移動，不要因為項目已經在生產中而大吵大鬧。

當我設置react-router-dom看起來每個頁面都在客戶端上處理，如果路由不在Router處理的路由內，則不會重新加載整頁。

客戶端路由器

import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'

const history: History = createBrowserHistory({ basename: baseUrl })

<Router history={history}>
  ...(routes and page layout)
</Router>

服務器路由器

<StaticRouter
 basename={basename}
 context={routerContext}
 location={params.location.path}
>
   ...(routes and page layout)
</StaticRouter>

有沒有辦法讓路由器以這種方式工作：

• 如果路由在react-router-dom處理的路由內，則進行客戶端轉換
• 如果路由器不在react-router-dom處理的范圍內（這意味着它仍然由 dotnet 后端處理），請重新加載整個頁面。

如果您需要更多信息，請與我們聯系。 先感謝您。

Answer 1

您需要在Router的末尾為 * 路由添加一個NoMatch組件

<Route component={NoMatch} />

並定義您的NoMatch組件，如下所示

function NoMatch() {
    window.location.reload();
    return null;
}

此外，您的路線應該在<Switch> ，否則NoMatch將與您的路線一樣執行，這將導致無限循環。 有關更多詳細信息，請參閱文檔： https : //reacttraining.com/react-router/web/api/Switch

Answer 2

幸運的是，我們有history道具可以提供幫助，它提供了一個action參數，可以指示用戶是從另一條路線導航還是直接從當前路線開始。

所以這就是我解決重新加載循環問題的方法：

/**
 * Handles Legacy/SSR pages, reloads the page when the location changes
 *
 * @param {object} props Props
 * @param {object} props.location Location object
 * @param {object} props.history  History object
 */
const LegacyRoute = ( { location, history } ) => {
    useEffect( () => {
        // Reload the page if the location change ( and not on first load )
        if ( history.action === 'PUSH' ) {
            window.location.reload();
        }

        return () => {
            // Reload the page if we navigate away to another route
            window.location.reload();
        }
    }, [ location.pathname ] );

    return null;
}

然后將路由定義為：

<Route component={ LegacyRoute } />