How to Dynamically Manage Route Paths in React to Avoid Manual Updates Across the Application?

I have a Laravel backend with defined routes like this:

Route::get('task-list', [TaskController::class, 'taskListInfo']);
Route::post('task-save', [TaskController::class, 'taskInfoStore']);
Route::put('task-edit', [TaskController::class, 'taskEditInfo']);
Route::patch('task-updateinfo', [TaskController::class, 'taskInfoUpdate']);
Route::delete('task-deleteinfo', [TaskController::class, 'taskInfoDelete']);

On the frontend, I’m using React for navigation. The navigation structure is defined in a JSON object like this:

const items = [
{
    key: 'sub1',
    label: 'Dashboard',
    link: '/admin/dashboard',
},
{
    key: 'sub2',
    label: 'Interface',
    children: [
        {
            key: '5',
            label: 'Search History',
            link: '/admin/',
        },
        {
            key: '6',
            label: 'Booking List',
            link: '/admin/booking-list',
        },
    ],
},
{
    key: 'sub4',
    label: 'Go To',
    children: [
        {
            key: 'subList1',
            label: 'List',
            children: [
                { key: '12', label: 'Task', link: '/admin/task/list' },
                // Other list items...
            ],
        },
    ],
},
// More navigation items...];

In React, I’ve defined routes like this:

<Route exact path="/admin/task/list" element={<Protected Component={<TaskList />} />} />
<Route exact path="/admin/task/edit/:id" element={<Protected Component={<TaskUpdate />} />} />

And I use these routes in navigation links like this:

<Link to="/admin/task/list">Task List</Link>
<Link to={`/admin/task/edit/${data.id}`}>Edit Task</Link>

The Problem:

If I need to change a route path, for example, from /admin/task/list to /admin/task-list/list, I have to manually update the path in multiple places:

In the React route definitions:

<Route exact path="/admin/task-list/list" element={<Protected Component={<TaskList />} />} />

In the navigation links:

{ key: '12', label: 'Task', link: '/admin/task-list/list' },

This is tedious and error-prone, especially in a large application with many routes.

What I Want:

I want to dynamically manage these routes so that if I need to change a route path, I only need to update it in one place, and it automatically reflects everywhere (in React routes, navigation links, and the JSON structure). How can I achieve this?