ホームページ >ウェブフロントエンド >jsチュートリアル >上級レベル: React Router を使用したルーティング
上級レベルの開発者として、React アプリケーションのルーティングを包括的に理解することが重要です。 React Router は、URL パスに基づいてコンポーネントのナビゲーションとレンダリングを管理するための堅牢なソリューションを提供します。このガイドでは、React Router のセットアップ、重要なコンポーネント、およびネストされたルート、動的ルーティング、ルート パラメーター、ルート ガードなどの高度なテクニックについて説明します。
React Router は、React アプリケーションでクライアント側のルーティングを処理するための強力なライブラリです。これにより、動的ルーティング、ネストされたルート、URL パスに基づく条件付きレンダリングが可能になります。
まず、npm または Yarn を使用して React Router をインストールします。
npm install react-router-dom
または
yarn add react-router-dom
React Router は、ルートを定義し、ナビゲーションを処理するためのいくつかのコンポーネントを提供します。
Route コンポーネントは、パスを定義し、それをコンポーネントに関連付けるために使用されます。
例:
import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; const App = () => { return ( <Router> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Router> ); }; export default App;
Switch コンポーネントは、一度に 1 つのルートのみがレンダリングされ、最初に適合するルートと一致するようにします。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; import NotFound from './NotFound'; const App = () => { return ( <Router> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </Router> ); }; export default App;
Link コンポーネントはナビゲーション リンクを作成し、ページ全体のリロードを防ぎ、単一ページのアプリケーション エクスペリエンスを維持します。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; const App = () => { return ( <Router> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Router> ); }; export default App;
NavLink コンポーネントは Link に似ていますが、アクティブなルートに基づいてスタイルを設定できます。
例:
import React from 'react'; import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'; import Home from './Home'; import About from './About'; const App = () => { return ( <Router> <nav> <NavLink exact to="/" activeClassName="active"> Home </NavLink> <NavLink to="/about" activeClassName="active"> About </NavLink> </nav> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Router> ); }; export default App;
ネストされたルートを使用すると、他のルート内にルートを作成できます。これは、サブナビゲーションを備えた複雑なレイアウトに役立ちます。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom'; const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>; const Topics = () => { let { path, url } = useRouteMatch(); return ( <div> <h2>Topics</h2> <ul> <li> <Link to={`${url}/components`}>Components</Link> </li> <li> <Link to={`${url}/props-v-state`}>Props v. State</Link> </li> </ul> <Switch> <Route exact path={path}> <h3>Please select a topic.</h3> </Route> <Route path={`${path}/:topicId`} component={Topic} /> </Switch> </div> ); }; const App = () => ( <Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/topics">Topics</Link> </li> </ul> <Switch> <Route exact path="/"> <h2>Home</h2> </Route> <Route path="/topics" component={Topics} /> </Switch> </div> </Router> ); export default App;
動的ルーティングを使用すると、動的パラメータに基づいてルートを作成でき、ユーザー プロファイルや製品の詳細に役立ちます。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>; const App = () => ( <Router> <div> <ul> <li> <Link to="/user/1">User 1</Link> </li> <li> <Link to="/user/2">User 2</Link> </li> </ul> <Switch> <Route path="/user/:userId" component={User} /> </Switch> </div> </Router> ); export default App;
ルート パラメーターを使用すると、URL から値を取得してコンポーネントで使用できます。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>; const App = () => ( <Router> <div> <ul> <li> <Link to="/product/101">Product 101</Link> </li> <li> <Link to="/product/202">Product 202</Link> </li> </ul> <Switch> <Route path="/product/:productId" component={Product} /> </Switch> </div> </Router> ); export default App;
ルート ガードは、ユーザー認証などの条件に基づいて、特定のルートへのアクセスを制限します。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; const isAuthenticated = false; const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={(props) => isAuthenticated ? <Component {...props} /> : <Redirect to="/login" /> } /> ); const Dashboard = () => <h3>Dashboard</h3>; const Login = () => <h3>Login</h3>; const App = () => ( <Router> <div> <PrivateRoute path="/dashboard" component={Dashboard} /> <Route path="/login" component={Login} /> </div> </Router> ); export default App;
リダイレクトにより、プログラムによってユーザーを別のルートに移動できます。
例:
import React from 'react'; import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'; const OldPage = () => <h3>Old Page (will redirect)</h3>; const NewPage = () => <h3>New Page</h3>; const App = () => ( <Router> <Switch> <Route path="/old-page"> <Redirect to="/new-page" /> </Route> <Route path="/new-page" component={NewPage} /> </Switch> </Router> ); export default App;
この例では、/old-page にアクセスすると、ユーザーは自動的に /new-page にリダイレクトされます。
React Router を使用してルーティングをマスターすることは、洗練されたユーザーフレンドリーな React アプリケーションを構築するために不可欠です。ルートの設定方法、コア コンポーネントの使用方法、およびネストされたルート、動的ルーティング、ルート パラメーター、ルート ガードなどの高度な技術の実装方法を理解すると、堅牢なナビゲーション システムを作成できるようになります。上級開発者として、これらのスキルは、React プロジェクトでスケーラブルなルーティング アーキテクチャを設計および実装し、シームレスなユーザー エクスペリエンスと保守可能なコードベースを確保するのに役立ちます。
以上が上級レベル: React Router を使用したルーティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。