解決済み: 反応ルーターのリロード ページが見つかりません

React Router reload page not found に関連する主な問題は、ユーザーがページを更新すると、ブラウザーが現在の URL をサーバーに要求しようとすることです。 ただし、React Router はクライアント側のルーティングであるため、URL に対応するサーバー ルートがないため、404 Not Found エラーが返されます。 ユーザーが更新時に特定のコンテンツが表示されることを期待している場合、これは特に問題になる可能性があります。

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// 行 1: この行は、react-router-dom ライブラリから BrowserRouter、Route、および Switch コンポーネントをインポートします。

// 行 3: この行は、JSX コードを返す App という関数を定義します。

// 5 行目: この行は、react-router-dom の Router コンポーネントで JSX コード全体をラップします。

// 6 行目: この行は、react-router-dom から Switch コンポーネント内のすべてのルートをラップします。

// 行 7 ～ 9: これらの行は、それぞれのコンポーネント (Home と About) を使用して、それぞれ '/' と '/about' の XNUMX つのルートを定義します。

// 行 11 ～ 12: これらの行は、一致するルートが他にない場合のルートを定義し、「ページが見つかりません」という h1 タグをレンダリングします。

ページが見つかりませんエラー

React Router の Page not found エラーは、ユーザーが存在しないページまたはルートにアクセスしようとしたときに発生するエラーです。 これは、ユーザーが URL を間違って入力した場合、またはアクセスしようとしているページが削除または移動された場合に発生する可能性があります。 React Router では、このエラーは コンポーネントの render prop と 404 ページを返す関数を渡します。 これにより、開発者は、役立つリンクや謝罪メッセージなど、必要なコンテンツを含むカスタム 404 ページを作成できます。

反応ルーターでページが見つかりませんを処理するにはどうすればよいですか

React Router を使用する場合、URL が既存のルートのいずれとも一致しない場合に NotFound コンポーネントをレンダリングするカスタム ルートを作成することで、見つからないページを処理できます。 これを行うには、パスを「*」に設定して新しいルートを作成し、NotFound コンポーネントをレンダリングする必要があります。

例：

} />

これは、既存のルートでまだ一致していない URL と一致し、NotFound コンポーネントをレンダリングします。

反応するページを強制的にリロードするにはどうすればよいですか

React Router では、履歴オブジェクトで replace メソッドを使用して、ページを強制的にリロードできます。 これにより、履歴スタックの現在のエントリが新しいエントリに置き換えられるため、ページのリロードが強制されます。 このメソッドを使用するには、まず履歴オブジェクトにアクセスする必要があります。 これは、ルーター コンポーネントを作成するときに props として渡すことで実行できます。

const AppRouter = () => (

{/* ルートはこちら */}

);

履歴オブジェクトにアクセスできるようになったら、その replace メソッドを次のように使用できます。

history.replace('/some-route');

関連記事：

コメント