内容：React Router の使用方法（その 2）反应：React Router 的使用方法（第二部分）

1 年 ago

逸, 科

2 minutes

我参考了这个页面。
【适用于最新版本】说明React Router的使用方法。

创建项目

create-react-app ex02
cd ex02
yarn add react-router-dom
yarn start

源代码的树形结构

$ tree src
src
├── App.css
├── App.js (修正）
├── App.test.js
├── Home.js (追加)
├── Login.js (追加)
├── NotFound.js (追加)
├── Register.js (追加)
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

/*  Home.js */

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

const Home = () => {
  return (
    <>
      <h1>ホーム</h1>
<blockquote>
      <div>
	ログインは<Link to={"/login"}>こちら</Link>
      </div>
<br />
      <div>
        新規登録は<Link to={"/register"}>こちら</Link>
      </div>
</blockquote>
    </>
  );
};

export default Home;

/* Login.js */

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

const Login = () => {
  return (
    <>
      <h1>ログインページ</h1>
<blockquote>
      <div>
        新規登録は<Link to={"/register"}>こちら</Link>
      </div>
<br />
      <div>
        <Link to={"/"}>ホームに戻る</Link>
      </div>
</blockquote>
    </>
  );
};

export default Login;

/* Register.js */

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

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
<blockquote>
      <div>
        ログインは<Link to={"/login"}>こちら</Link>
      </div>
<br />
      <div>
        <Link to={"/"}>ホームに戻る</Link>
      </div>
</blockquote>
    </>
  );
};

export default Register;

/* NotFound.js */

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

const NotFound = () => {
  return (
    <>
      <h1>お探しのページは見つかりませんでした。</h1>
<blockquote>
      <div>
        <Link to={"/"}>ホームに戻る</Link>
      </div>
</blockquote>
    </>
  );
};

export default NotFound;

// ---------------------------------------------------------------
//	App.js
// ---------------------------------------------------------------
/* App.js */

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Register from "./Register";
import Login from "./Login";
import NotFound from "./NotFound";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={"/"} element={<Home />} />
        <Route path={"/register"} element={<Register />} />
        <Route path={"/login"} element={<Login />} />
	    <Route path={"*"} element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

相关信息