React の動的ルーティング-jsチュートリアル-php.cn

React の動的ルーティング

WBOY

リリース： 2024-08-28 06:01:39

オリジナル

1042 人が閲覧しました

Dynamic routing in React

React の動的ルーティングを使用すると、動的データまたはパラメーターに基づいてルートを作成でき、アプリケーション内でより柔軟で強力なナビゲーションが可能になります。これは、ユーザー入力またはその他の動的要因に基づいてさまざまなコンポーネントをレンダリングする必要があるアプリケーションに特に役立ちます。

React Router を使用した動的ルーティングの設定
通常、React で動的ルーティングを実装するには、react-router-dom ライブラリを使用します。ステップバイステップのガイドは次のとおりです:

React Router をインストールします: まず、react-router-dom をまだインストールしていない場合はインストールする必要があります:
npm install 反応ルーターダム

ルートの作成: コンポーネントを使用してルートを定義します。パス内の動的セグメントを使用してパラメータをキャプチャします。
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

ログイン後にコピー

ルートパラメーターへのアクセス: useParams フックを使用して、コンポーネント内の動的パラメーターにアクセスします。
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

ログイン後にコピー

例: 動的ユーザープロファイル
URL 内のユーザー ID に基づいてさまざまなユーザープロファイルに移動する簡単な例を作成してみましょう。

ホームコンポーネント: このコンポーネントには、さまざまなユーザープロファイルへのリンクが含まれます。
JavaScript

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

ログイン後にコピー

UserProfile コンポーネント: このコンポーネントは URL からのユーザー ID を表示します。
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

ログイン後にコピー

アプリコンポーネント: このコンポーネントはルーターをセットアップし、ルートを定義します。
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

ログイン後にコピー

以上がReact の動的ルーティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。