reactのルーティングでのページ遷移とパラメーターの受け渡しの方法は何ですか？

1年 ago
綾乃, 一希
1 minute

Reactを使用すると、React Routerを使ってページの遷移やパラメーターの受け渡しができます。以下はReact Routerを使用したページ遷移とパラメーター受け渡しの方法です。

  1. React Routerのインストール方法：まずは、React Routerライブラリをインストールする必要があります。以下のコマンドを使用してReact Routerをインストールできます。
npm install react-router-dom
  1. ブラウザルーター
  2. ハッシュルーター
  3. 経路 (けいろ)
import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}
  1. リンク
  2. 履歴を追加
  1. リンクコンポーネントを使用する:
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}
  1. history.pushメソッドを使用してください。
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}
  1. 経路 (けいろ)
  2. 翻訳
  1. パラメーターを含むルートパス：
<Route path="/user/:id" component={User} />

Userコンポーネント内では、props.match.params.idを使用して渡されたパラメータを取得できます。

  1. render属性を使用する：
<Route path="/user" render={(props) => <User {...props} userId={123} />} />

Userコンポーネントでは、props.userIdを使用して渡されたパラメーターを取得できます。

これは、React Routerを使用してリダイレクトとパラメータの渡し方の基本的な方法です。具体的な要件に応じて、ネストされたルートやルートガードなどの高度な機能も利用できます。

bannerAds