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 が含まれていない場合は、最初にインストールします。
Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.
LinkedIn