🙄

React(18)でルーティング【初学者向け】

2022/04/19に公開

JavaScript

はじめに

React(18)でルーティングしてみました。
まだプログラミングを始めたばかりなので、自分の思った通りに動いてめちゃくちゃ嬉しかった😳
私と同じような初学者でまだルーティングが難しいと感じる方の力になれますように。
あとZennもこれが初投稿になるので練習🔥
ファイルやフォルダの命名規則などはまだ分からないのであしからず。。。

環境

react 18.0.0
react-router-dom 6.3.0
typescript 4.6.3

構成

ファイル構成はこんな感じです。
Route.tsxはRoutingConfig.tsxとかにした方が良かったなと後悔。。。
（既存コンポーネントと区別が付けにくい💦）

src
- component
  - Home.tsx
  - About.tsx
  - Contact.tsx
- route
  - Route.tsx
- App.tsx
- index.tsx

ソースコード

githubも公開しています。
githubも先日覚えたて🤤

一番最初に雛形を下記コマンドで作成。

npx create-react-app routing-practise --template typescript

今回CSSはあてていません。（ルーティングにのみ注力しています）

App.tsx

import { RouterConfig } from './route/Route';

function App() {
  return (
    <div>
      <RouterConfig />
    </div>
  );
}

export default App;

Route.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { About } from "../component/About";
import { Contact } from "../component/Contact";
import { Home } from "../component/Home";

export const RouterConfig = () => {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </BrowserRouter>
    </>
  );
};

Home.tsx

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

export const Home = () => {
  return (
    <>
      <h1>Homeページです</h1>
      <Link to="/about">Aboutページに移動</Link>
      <br />
      <Link to="/contact">Contactページに移動</Link>
    </>
  );
};

About.tsx

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

export const About = () => {
  return (
    <>
      <h1>Aboutページです</h1>
      <Link to="/">Homeページに移動</Link>
      <br />
      <Link to="/contact">Contactページに移動</Link>
    </>
  );
};

Contact.tsx

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

export const Contact = () => {
  return (
    <>
    <h1>Contactページです</h1>
    <Link to="/">Homeページに移動</Link>
    <br />
    <Link to="/about">Aboutページに移動</Link>
    </>
  );
};

完成

CSSがあたってないのでかなりシンプルですが、今回実現したかったルーティングが出来ました👏

実行する際は下記コマンドで動作確認しました。

npm start

ルーティングの勉強もですが、typescriptの勉強もしたかったが今回は特に型などは出てきませんでした😅
最後まで見ていただきありがとうございました！
Zennは本当にUIが美しいですね

はじめに

環境

構成

ソースコード

完成

Discussion