React Router v7のチュートリアル

Remixを使っていたので、React Router v7になってどうなるのかをチュートリアルを触ってみる

基本的には公式 の手順どおりやってみるだけ

※開発環境 の設定は最後に。

セットアップ

ここではyarnを使う

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

$ yarn create react-router@latest --template remix-run/react-router/tutorials/address-book
➤ YN0000: · Yarn 4.6.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-react-router@npm:7.1.5, @nodelib/fs.scandir@npm:2.1.5, @nodelib/fs.stat@npm:2.0.5, @nodelib/fs.walk@npm:1.2.8, @remix-run/web-blob@npm:3.1.0, @remix-run/web-fetch@npm:4.4.2, and 191 more.
➤ YN0000: └ Completed in 4s 603ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 197 packages were added to the project (+ 28.45 MiB).
➤ YN0000: └ Completed in 0s 822ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 498ms
➤ YN0000: · Done in 5s 952ms


         create-react-router v7.1.5

   dir   Where should we create your new project?
         .

      ◼  Template: Using remix-run/react-router/tutorials/address-book...
      ✔  Template copied

 overwrite   Your project directory contains files that will be overwritten by
             this template (you can force with `--overwrite`)

             Files that would be overwritten:
               .gitignore
               package.json
               README.md

             Do you wish to continue?

             Yes
      ◼  Nice! Git has already been initialized

  deps   Install dependencies with yarn?
         Yes

      ✔  Dependencies installed

  done   That's it!
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

生成されたpackage.jsonは以下のとおり。 reactは19がインストールされている

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "cross-env NODE_ENV=production react-router build",
    "dev": "react-router dev",
    "start": "cross-env NODE_ENV=production react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc"
  },
  "dependencies": {
    "@react-router/node": "^7.1.5",
    "@react-router/serve": "^7.1.5",
    "isbot": "^5.1.17",
    "match-sorter": "^8.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.1.5",
    "sort-by": "^1.2.0",
    "tiny-invariant": "^1.3.3"
  },
  "devDependencies": {
    "@react-router/dev": "^7.1.5",
    "@types/node": "^20",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "cross-env": "^7.0.3",
    "typescript": "^5.7.2",
    "vite": "^5.4.11"
  },
  "engines": {
    "node": ">=20.0.0"
  },
  "packageManager": "yarn@4.6.0"
}

動作確認で以下のコマンドを実行するが、ブラウザで表示できない。

$ yarn dev
  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

http://localhost:5173/

DevContainer上でViteを動かすと、ポートフォワードが動作しないようなので設定追加

Vite公式（Server Options）

vite.config.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    reactRouter()
  ],
  server: {
    host: '127.0.0.1',
  },
});

再度実行する

$ yarn dev
  ➜  Local:   http://127.0.0.1:5173/
  ➜  press h + enter to show help

http://127.0.0.1:5173/

無事表示されました。

躓きポイントはここだけで、あとはチュートリアルどおり問題なく進みました。

開発環境

VSCのDev Containersを使ってセットアップ最終的な設定ファイルは以下の通り。

.devcontainer/devcontainer.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
  "name": "React Router v7",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bullseye",
  "runArgs": ["--name", "react_router_v7-address-book"],
  // Features to add to the dev container. More info: https://containers.dev/features.
  "features": {
    "node": {
      "version": "v22.13.0"
    }
  },
  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],
  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "yarn install",
  // Configure tool-specific properties.
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      "settings": {
        "eslint.nodePath": "./node_modules",
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[typescript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit",
          "source.organizeImports": "explicit"
        },
        "cSpell.files": ["!package.json"]
      },
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": [
        "dbaeumer.vscode-eslint",
        // 共通
        "esbenp.prettier-vscode",
        "mhutchie.git-graph",
        "eamodio.gitlens",
        "usernamehw.errorlens",
        "oderwat.indent-rainbow",
        "aaron-bond.better-comments",
        "streetsidesoftware.code-spell-checker"
      ]
    }
  }
  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}