LaravelとReactを利用してTodoリストの編集処理

前提・実現したいこと

（前提）
LaravelとReactを利用してTodoリストを作成しております。

（実現したいこと）
編集のリンクを押下→編集画面遷移→編集の値を入力→編集完了

（実現したい処理）
User.jsでユーザー一覧を表示

UserEdit.jsで編集の値を入力

api.phpでcontrollerに値を渡す？→ここがわからないです

UserController.phpでUserEditで受け取った値を取得してupdate処理を行う。

UserEditDone.jsで編集完了

発生している問題

LaravelのControllerにReactからのパラメータをRequestに渡せない。

該当のソースコード

php
1
2UserContorller.php
3<?php
4
5namespace App\Http\Controllers;
6
7use Illuminate\Http\Request;
8use Illuminate\Support\Facades\Log;
9use App\Models\Role;
10
11class UserController extends Controller
12{
13    public function list(Request $request){
14        $roles = Role::all();
15        return response()->json(['roles' => $roles]);
16    }
17
18    public function detail(Role $role){
19      return response()->json(['role' => $role]);
20    }
21
22    public function editdone(Request $request,Role $role){
23　　　#値を受け取りたい
24    }
25}

User.js

react
1import React, { useEffect, useState } from 'react';
2import axios from 'axios';
3import { Link } from 'react-router-dom';
4function User() {
5
6    const [roles, setUsers] = useState([]);
7
8    useEffect(() => {
9        getUsers()
10    },[])
11
12    const getUsers = async () => {
13        const response = await axios.get('/api/user');
14        setUsers(response.data.roles)
15    }
16
17    return (
18        <div>
19            <h1>Userページ</h1>
20            <ul>
21                {
22                roles.map((role) => 
23                <li key={role.rol_id}>
24                    {role.rol_id}
25                    {role.rol_name}
26                    <Link to={`/user/${role.rol_id}`}>
27                        詳細
28                    </Link>
29                    <Link to={`/user/edit/${role.rol_id}`}>
30                        編集
31                    </Link>
32                    <Link to={`/user/delete/${role.rol_id}`}>
33                        削除
34                    </Link>
35                </li>)
36                }
37                
38            </ul>
39        </div>
40    );
41
42}
43export default User;
44

UserEdit.js

react
1import React, { useEffect, useState } from 'react';
2import axios from 'axios';
3import { Link } from 'react-router-dom';
4
5function UserEdit(props) {
6    
7    const [role, setRole] = useState([]);
8
9    useEffect(() => {
10        getRole()
11    },[])
12
13    const getRole = async () => {
14        const response = await axios.get(`/api/user/${props.match.params.id}`);
15        setRole(response.data.role)
16    }
17
18    return (
19        <div>
20            <h1>User編集ページ</h1>
21
22             <input type='text' name="rol_id" defaultValue={role.rol_id} /><br />
23             <input type='text' name="rol_name" defaultValue={role.rol_name} />
24            <Link to={`/user/editdone/${role.rol_id}` + "?id=5"}>
25                編集完了
26            </Link>
27        </div>
28    );
29}
30export default UserEdit;

UserEditDone.js

react
1import React, { useEffect, useState } from 'react';
2import axios from 'axios';
3import { Link } from 'react-router-dom';
4
5function UserEditDone(props) {
6
7    const [role, setRole] = useState([]);
8
9    useEffect(() => {
10        getRole()
11    },[])
12
13    const getRole = async () => {
14        const response = await axios.get(`/api/user/editdone/${props.match.params.id}`);
15        window.alert("更新しました");
16        window.location.href = 'https://todo_list/#/user';
17
18    }
19    return (
20        <div>
21        </div>
22    );
23}
24export default UserEditDone;

試したこと

Linkに値を付けてみたりしました。
（例）
<Link to={/user/editdone/${role.rol_id} + "?id=5"}>
</Link>

補足情報（FW/ツールのバージョンなど）

バージョン

json
1{
2    "private": true,
3    "scripts": {
4        "dev": "npm run development",
5        "development": "mix",
6        "watch": "mix watch",
7        "watch-poll": "mix watch -- --watch-options-poll=1000",
8        "hot": "mix watch --hot",
9        "prod": "npm run production",
10        "production": "mix --production"
11    },
12    "devDependencies": {
13        "@babel/preset-react": "^7.13.13",
14        "axios": "^0.21",
15        "bootstrap": "^4.6.0",
16        "jquery": "^3.6",
17        "laravel-mix": "^6.0.6",
18        "lodash": "^4.17.19",
19        "popper.js": "^1.16.1",
20        "postcss": "^8.1.14",
21        "react": "^17.0.2",
22        "react-dom": "^17.0.2",
23        "resolve-url-loader": "^4.0.0",
24        "sass": "^1.32.11",
25        "sass-loader": "^11.0.1"
26    },
27    "dependencies": {
28        "react-router-dom": "^5.2.0"
29    }
30}