HOWTO · React
React Router 4 正規表現パス
この記事では、React ルーターのパスに正規表現を追加する方法を説明します。
このページの内容
この記事では、正規表現を react-router パスに追加する方法を学びます。 IDまたは文字列を使用してパスを作成するには、リクエストの取得元の文字列を検証する必要があります。
正規表現を使用すると、文字列を検証できます。
react-router V4 を使用して正規表現をパスに追加する
React.js では、react-router ライブラリを使用してさまざまなルートを作成できます。 ルートごとにパスを指定する必要があり、パスで取得したパラメーターを検証する必要がある場合は、パスに正規表現を追加できます。
以下の例では、3つの異なるルートを作成しています。 1 番目と 2 番目のルートでは、正規表現をパスに追加しました。
また、Home コンポーネントの完全一致を無効にするために、exact={false} を prop として渡しました。 そのため、どのルートも一致しない場合、ユーザーを Home ルートにリダイレクトできます。
最初のルートは数字と文字を含む文字列を受け入れ、2 番目のルートは数字のみを受け入れます。 ルートが完全に一致しない場合は、ホームページが表示されます。
コード例:
import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Different components
function Home() {
return <h2>This is Home Page.</h2>;
}
function About() {
return <h2>This is About Page.</h2>;
}
function UserDetails() {
return <h2>This is User Details Page.</h2>;
}
export default function App() {
return (
<>
{/* Router for different paths */}
<Router>
<Switch>
{/* route = /user/id */}
<Route
path="/user/:id(0-9a-f]{8})?"
component={UserDetails}
exact={true}
/>
{/* route = /id */}
<Route path="/:id(\d+)" component={About} exact={true} />
<Route path="/" component={Home} exact={false} />
</Switch>
</Router>
</>
);
}
出力：
user/234edf43 のようなパスに移動すると、UserDetails コンポーネントが表示されます。
/1234 のようなパスに移動すると、About コンポーネントが表示されます。
/abcd12 のようなパスは、他のルートが一致しないため、Home コンポーネントを表示します。
また、ユーザーは要件に応じて正規表現を変更できます。ユーザーが正規表現が正しく機能していないことに気付いた場合は、最初のルートで追加したように、正規表現の最後に疑問符を追加します。
