● react-router のミニマルな形 (TypeScript)

● react アプリの作成

npx create-react-app my-router-ts-app --template typescript
cd my-router-ts-app

● react-router の追加

yarn add react-router-dom
yarn add @types/react-router-dom

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Post from "./routes/Post";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.tsx

import { Link } from "react-router-dom";
import './App.css';

function App() {

  return (
    <div>
      <h1>My-App Hello!</h1>
      <nav>
        <Link to="/about">About</Link>{" "}|{" "}
        {/* <Link to="/contact">Contact</Link>{" "}|{" "}
        <Link to="/post/1">Post1</Link>{" "}|{" "}
        <Link to="/post/2">Post2</Link>{" "}|{" "} */}
      </nav>
    </div>
  );

}

export default App;

routes/About.tsx

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

export default function About() {
  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>About</h2>
      <p>テストテキストテストテキストテストテキスト</p>
      <Link to="/">戻る</Link>
    </main>
  );
}

routes/Contact.tsx

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

export default function Contact() {
  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>Contact</h2>
      <p>コンタクトテキストコンタクトテキストコンタクトテキストコンタクトテキストコンタクトテキストコンタクトテキスト</p>
      <Link to="/">戻る</Link>
    </main>
  );
}

routes/Post.tsx

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

export default function Post() {
  let params = useParams();

  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>Post (ID : {params.id})</h2>
      <p>テストテキストテストテキストテストテキスト</p>
      <Link to="/">戻る</Link>
    </main>
  );
}

これで、次のURLへアクセスできます。

http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/post/1
http://localhost:3000/post/2

● 全ページ共通のレイアウトを使用する（Layout コンポーネント）

https://maku.blog/p/dxamw8i/

● 戻るボタン（ history.back(); ）

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

<button type='button' onClick={() =>{ navigate(-1) }}>戻る</button>

● 遅延ローディング

https://zukucode.com/2021/06/react-router-razy.html

● Switch-Router

https://dev-yakuza.posstree.com/react/create-react-app/react-router/

● react-router v6 では Switch の代わりに Routes を使いましょう

https://stackoverflow.com/questions/69843615/switch-is-not-exported-from-react-router-dom

● react-router でメソッドを使って画面遷移する

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

● 認証を伴ったルーティング

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />