首先

这篇文章是一个React初学者为了学习而写的文章。如果有错误的地方，希望您能温柔地指出来，我会非常感激。

React Router 是一個用於 React 應用程序的路由庫。

这是一个库，它允许您在React中进行路由设置。
简单来说，它使得可以通过URL进行页面跳转。

安装React Router

运行以下命令以安装最新版本的React Router。

npm install react-router-dom@latest

您可以在package.json文件中查看React Router的版本。

"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.11.1",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
}

尝试使用React Router

ページを用意する

既然要实现页面跳转，我们就从创建要跳转的页面开始吧。在src文件夹下创建一个名为pages的文件夹，然后在其中创建三个页面，分别是Home、About和Contents。

projectフォルダ
└── src
   └──  pages
       ├── About.js
       ├── Contents.js
       └── Home.js

每个页面都是按照以下方式进行实现的。
页面只包含标题和到其他页面的链接。

import { Link } from "react-router-dom";

function Home() {
  return (
    <>
      <h1 className="text-3xl font-bold underline text-center mb-4">Homeページ</h1>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/about'}>Aboutページを開く</Link>
      </div>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/contents'}>Contentsページを開く</Link>
      </div>
    </>
  );
}

export default Home;

import { Link } from "react-router-dom";

function About() {
  return (
    <>
      <h1 className="text-3xl font-bold underline text-center mb-4">Aboutページ</h1>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/'}>Homeページを開く</Link>
      </div>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/contents'}>Contentsページを開く</Link>
      </div>
    </>
  );
}

export default About;

import { Link } from "react-router-dom";

function Contents() {
  return (
    <>
      <h1 className="text-3xl font-bold underline text-center mb-4">Contentsページ</h1>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/'}>Homeページを開く</Link>
      </div>
      <div className="text-blue-500 hover:underline text-center my-1.5">
        <Link to={'/about'}>Aboutページを開く</Link>
      </div>
    </>
  );
}

export default Contents;

ルーティングを設定する

然后我们将进行路由设置。
对于App.js，我们要进行以下编辑。

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contents from './pages/Contents';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={`/`} element={<Home />} />
        <Route path={`/about`} element={<About />} />
        <Route path={`/contents`} element={<Contents />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

実行する

请使用以下命令来执行项目。

npm start

最后

这次学习了React Router的基本用法。
我之前遇到了一个小问题，不知道如何在React中进行页面跳转，于是进行了一番调查，发现实现页面跳转需要安装一个库，一开始感到震惊。
前端框架（库）看起来真的很复杂呢。