Reactでreact-router-domを使う方法は何ですか？

2年 ago
優斗, 朝陽
1 minute

React内において、react-router-domは、ルーティング機能を実現するためのライブラリです。URLのナビゲーションやページの切り替えを実現するためのいくつかのコンポーネントやAPIを提供しています。

react-router-domを使用するには、まずそのライブラリをインストールする必要があります。

npm install react-router-dom

その後、通常はAppコンポーネントで、react-router-domの関連コンポーネントとAPIを導入します。

  1. ブラウザルーター：このコンポーネントはアプリケーション全体を包み込むために使用され、HTML5履歴APIを使用してURLの変更を監視し、対応するコンポーネントをページにレンダリングします。
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 应用的其他组件 */}
    </Router>
  );
}
  1. Route：このコンポーネントはルートルールを定義するために使用され、URLがそのルールに一致すると、対応するコンポーネントがレンダリングされます。
import { Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

URLが”/”の場合、Homeコンポーネントを描画し、URLが”/about”の場合、Aboutコンポーネントを描画する。

  1. リンク：このコンポーネントは、ナビゲーションリンクを生成するために使用され、このリンクをクリックするとURLが変更され、対応するルートルールがトリガーされます。
import { Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

上記の例では、”Home”リンクをクリックするとURLが”/”に変わり、Homeコンポーネントがレンダリングされます。また、”About”リンクをクリックするとURLが”/about”に変わり、Aboutコンポーネントがレンダリングされます。

react-router-domの一般的な使用法を示しましたが、他にも実際のニーズに応じて多くの機能やAPIが利用可能です。

bannerAds