解決済み: 反応ルーター 404 リダイレクト

React Router 404 リダイレクトに関連する主な問題は、実装が難しいことです。 React Router には組み込みの 404 ページがないため、開発者は手動で 404 ページのルートを作成し、既存のルートに一致しないリクエストをリダイレクトするようにルーターを構成する必要があります。 これには追加のコードと構成が必要であり、時間がかかり、問題が発生した場合のデバッグが困難になる可能性があります。 さらに、ユーザーが存在しない URL に直接移動すると、404 ページにリダイレクトされる代わりにエラー ページが表示されます。

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

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

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

// 行 5 ～ 7: これらの行は、react-router-dom の Router コンポーネントで App コンポーネントをラップします。

// 行 8 ～ 10: これらの行は、Home コンポーネントと About コンポーネントの XNUMX つのルートをそれぞれ定義します。

// 行 12: この行は、一致するルートが他にない場合にホームページにリダイレクトするルートを定義します。

404 エラーコードとは

React Router の 404 エラー コードは、要求されたリソースが見つからなかったことを示す HTTP ステータス コードです。 通常、ユーザーが存在しないページまたはルートにアクセスしようとすると返されます。 これは、ユーザーが URL を間違って入力した場合、またはページへのリンクを更新せずにページが削除または移動された場合に発生する可能性があります。 これが発生すると、React Router は一般的な 404 ページを表示し、ユーザーにエラーを通知する適切なメッセージを表示します。

404リダイレクト

React Router では、404 リダイレクトは、ユーザーが無効な URL にアクセスしようとしたときに、ユーザーを別のページにリダイレクトする方法です。 これは、ユーザーが間違った URL を入力したり、存在しないページにアクセスしようとしたりするときに、より良いエクスペリエンスをユーザーに提供するのに役立ちます。 404 リダイレクトは、React Router の Redirect コンポーネントを使用して実装できます。これにより、ユーザーをリダイレクトするページのパス名を指定できます。 たとえば、誰かが /invalid-url にアクセスしようとした場合、次のようにリダイレクト コンポーネントを使用できます。

関連記事：

コメント