HOWTO · React
React JS での条件付きルーティング
このチュートリアルでは、React JS での条件付きルーティングについて説明します。
このページの内容
ユーザーを別のページに誘導する必要がある場合があります。 たとえば、ユーザーがフォームに無効な情報を入力した場合、無効なデータについてユーザーに通知する別のページにユーザーを転送することができます。
React JS では、ルーティングとして知られています。 主に、ユーザーを別の場所に紹介するために使用されます。
条件付きルーティングと呼ばれるルーティングがあり、主に指定された条件に基づいてユーザーを別のページに転送します。
この記事では、Web アプリケーションで条件付きルーティングを設定する方法を示します。 また、トピックを簡単にするために必要な例と説明も表示されます。
Web アプリケーションで条件付きルーティングを適用する
以下の例では、Web アプリケーションで条件付きルーティングを設定する方法を示します。 以下のコードを見てください。
コード例 - App.js:
// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'
export default function App() {
var Newpage = false;
// Applying condition
if (Newpage) {
return (
<BrowserRouter>
<Routes>
<Route path="*" element={<Router />} />
</Routes>
</BrowserRouter>
)
} else {
return (
<h1>Page not changed</h1>
)
}
}
上記のコードの短いバージョンもあり、以下に示します。
コード例 - App.js:
// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'
export default function App() {
var Newpage = true;
return (
<BrowserRouter>
<Routes>
<Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />
</Routes>
</BrowserRouter>
)
}
上記の例では、次の行にインライン条件を適用しました。
<Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />
また、各コード ブロックの目的については既に説明しました。 次に、以下のような index.js ファイルを見てみましょう。
サンプルコード - index.js:
// importing necessary packages and files
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
すべてのファイルの処理が完了すると、ブラウザーに以下の出力が表示されます。
このチュートリアルでは react-select パッケージを使用するため、アプリケーションを実行する前にこのパッケージをインストールする必要があります。 これは、npm を使用して簡単にインストールできます。
この記事で共有するサンプル コードは、React JS プロジェクトで記述されています。 また、React プロジェクトを実行するには、システムに最新の Node JS バージョンが含まれている必要があります。
システムに Node JS が含まれていない場合は、最初にインストールします。
