Как использовать вложенный маршрутизатор React Router в дочернем или дочернем компоненте

Я создаю приложение, в котором мне нужно вести учет автомобилей с помощью firebase fireStore, но у меня возникла проблема с маршрутизацией компонента, я не знаю, как выполнять маршрутизацию внутри субкомпонента. Весь мой код указан в ссылке: https://codesandbox.io/s/inventory-forked-yhg20 Я использую следующий сценарий

1. Компоненты: App.js Home.js ShowCars.js Header.js Car.js и EditCar.js.

2. App.js содержит Header.js Home.js и ShowCars.js

3. В Header.js он работает как панель навигации, где я могу перейти к Home.js и ShowCars.js.

4. При нажатии Показать автомобиль на панели навигации http: // localhost: 3000 / showcar создается ссылка, и в ShowCars.js извлекаются данные из базы данных firebase. сервер и массив автомобилей отображаются на каждой карте с помощью cars.map ()

5. В car.map () используется компонент Car.js, который отображает строку таблицы на каждой карте < a href = "https://i.stack.imgur.com/mHe0F.png" rel = "nofollow noreferrer">

6. В car.js я использовал ссылку для редактирования и хочу, чтобы эта ссылка для редактирования отображала компонент EditCar.js и перенаправляла его по новому пути. например http: // localhost: 3000 / showcar / edit или http: // localhost: 3000 / edit, любой подходящий путь будет приемлемым. Это тот момент, когда я не знаю, как выполнить рендеринг в новый компонент с помощью response-router

Решение проблемы, которое мне нужно, - это

1. Перейти к новому пути при нажатии на ссылку Изменить, и EditCar.js должен отображаться

OR

2. Передайте автомобиль в качестве реквизита через ‹EditCar car = {car} /› в car.map () и перейдите к новому пути при нажатии < strong> Edit Link и EditCar.js должны быть упомянуты в комментариях ???? (Это должно быть первым приоритетом, если это невозможно, то первый пункт также будет приемлемым)

       return (
        <div>
          ShowCars
         <hr />
         <table className="table">
           <thead className="thead-light ">
             <tr>
               <th scope="col">#</th>
               <th scope="col">Name</th>
               <th scope="col">Chasis-No</th>
               <th scope="col">Color</th>
               <th scope="col">Edit</th>
             </tr>
           </thead>
           <tbody>
             {cars.map(({ id, car }, index) => (
               <>
                 <Car key={id} car={car} index={index} />
                 {/* 
                       <Route path="/Edit" >
                           <EditCar car={car}/>. 
                       </Route>         
                 */}
               </>
             ))}
           </tbody>
         </table>
       </div>
     );
   }
   
   export default ShowCars;
   

Ссылка для кода: https://codesandbox.io/s/inventory-forked-yhg20. Отредактируйте код в CodeSandBox. Спросите меня, если моя информация неполна