React の別のページへのリンク

1. React のリンク
2. react-router-dom パッケージを使用して React の別のページにリダイレクトする

リンクは、インターネット上で見つけることができます。 SEO における重要性は言うまでもなく、Web ページ、写真、ビデオなどのリソースを発見する上で重要です。

ルーティングは、URL にアクセスしたときに実行するコードを決定します。 この記事では、React のルーティングがどのように機能するかについて説明します。

React のリンク

以下の図のように、React のようなライブラリを使用しない通常のアプリ内のリンクは、アンカー タグを使用して構築されます。

<a href="https://Youtube.com">Go To Youtube</a>

これは React でも機能することに注意してください。 このルーティング戦略は、新しいルートで変更されるのが画像と一部のテキストだけである場合に、ページ全体の更新をトリガーします。

ページ全体の更新は状況によっては有益ですが、必要になることはほとんどありません。

React Router のようなライブラリはこれを使用して、アプリが特定のルートに応じて再レンダリングする必要があるコンポーネントをレンダリングできるようにします。

react-router-dom パッケージを使用して React の別のページにリダイレクトする

react-router-dom パッケージを使用して ReactJS の別のページにリダイレクトする方法を見てみましょう。 react-router-dom は、Web ページで動的ルーティングを構築できるようにする reactJS パッケージです。

まず、react アプリを作成してから、さまざまなコンポーネントを追加します。

Home.jsx と About.jsx の 2つのページを作成しました。

コード - Home.jsx:

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

const Home = () => {
  return (<div><h1>Home Page</h1>
      <p>You are in home Page</p><br /><ul>
          <li><Link to = '/'>Home</Link>
        </li><li>
          <Link to = '/about'>About</Link>
        </li></ul>
    </div>);
};
export default Home;

コード - About.jsx:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is about page</p>
    </div>
  );
};

export default About;

react-router-dom パッケージを使用してルーティングを実装します。 このセクションでは、React アプリに react-router-dom パッケージを実装します。

そのためには、BrowserRouter,、Routes,、および Route を含む react-router-dom パッケージから特定のコンポーネントをインポートする必要があります。

簡単にするために、BrowserRouter を Router としてエイリアスします。 次に、インポートされた各コンポーネントを 1つずつ調べます。

BrowserRouter は、HTML5 history API を利用して、UI を URL と同期させます。 Route は、そのパスが現在の URL と一致する場合に UI のレンダリングを担当し、Routes は場所に対応する最初の子ルートまたはリダイレクトを表示します。

これは、react-router-dom パッケージを実装する App.js ファイルのコードです。

コード - App.js:

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path='/' element={
    <Home />} />

          <Route path="/about' element={<About />} /'
        </Routes>
      </Router>
    </>
  );
}

export default App;

React に接続しているにもかかわらず、React Router は応答するようにこっそりと書き換えて、現在の URL が正しく機能し続けるようにします。 また、全体が不要になるようにサーバー設定を変更すると、それらのリンクが自動的に更新されることも意味します。

About, をクリックすると、About ページにリダイレクトされます。

それで全部です。 React リンクの概念とルートを効率的に管理する方法を理解していると役に立ちます。