React-Route-Dom の使い方

8003 ワード
react-router React TypeScript TypeScript テキストリンク

React で画面遷移

Reactで画面遷移をさせるのに想像以上に時間がかかったので
単純化したものを備忘録的に記録

準備

Typescript 版の React プロジェクト作成
react-router-dom のインストール

  % npx create-react-app page-sample --template typescript
  % cd page-sample
  % npm install react-router-dom @types/react-router-dom

コード

index.tsx, App.tsx の２ファイルのみのコード記述で動くようにしました。

index.tsx

<App /> を <BrowserRouter>で括る。

index.tsx
import ReactDOM from "react-dom";
import App from "./App";
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter> ,
  document.getElementById("root")
);

App.tsx

App.tsxは以下のコードに置き換える。
遷移先ページを別ファイルにするのが普通だが単純化してApp.tsx内に定義

App.tsx
import { Routes, Route, Link } from "react-router-dom";

const Home  = () => { return (<h2>Home </h2>) }
const Page1 = () => { return (<h2>Page1</h2>) }
const Page2 = () => { return (<h2>Page2</h2>) }
const NotPG = () => { return (<h2>Error</h2>) }

function App() {
  return (
    <div className="App">
      <h1> Page Sample </h1>
        <Link to="/">      [  Home  ] </Link> <br/>
        <Link to="/page1"> [ Page 1 ] </Link> <br/>
        <Link to="/page2"> [ Page 2 ] </Link> <br/>
      <Routes>
        <Route index         element={<Home/>}/>
        <Route path="/page1" element={<Page1/>}/>
        <Route path="/page2" element={<Page2/>}/>
        <Route path="*"      element={<NotPG/>}/>
     </Routes>
    </div>
  );
}

export default App;

最後に

最も単純化したものを備忘録として記録しました。
忘れた時はまずここからですね。