reactjs - How to use Nested React Router in sub child or child component

Question

I am making an App where i have to maintain a record of cars by firebase fireStore but I am having a problem in routing a component i don't know how to do routing within sub-component. All my code is mentioned in the Link: https://codesandbox.io/s/inventory-forked-yhg20 The scenario i am using is as followed

1. The components are App.js Home.js ShowCars.js Header.js Car.js and EditCar.js

2. The App.js contains Header.js Home.js and ShowCars.js

3. In Header.js it works like a navbar where i can route to Home.js and ShowCars.js

4. When Clicking Show Car on NavBar http://localhost:3000/showcar Link is Created and in ShowCars.js Data is being fetched from firebase server and Array of cars are rendered on Every map By using cars.map()

5. In car.map() a Car.js component is used which render a table row on Every map

6. In car.js i used an Edit Link and i want that edit Link to render an EditCar.js component and route it to the new path like http://localhost:3000/showcar/edit or http://localhost:3000/edit any suitable path will be acceptable. This is the Point where i don't know how to render to new component using react-router

The Solution of the Problem I require is

1. Go to new Path When Clicking the Edit Link and EditCar.js should be render

OR

2. Pass car as props through < EditCar car={car} /> in car.map() and Go to new Path When Clicking the Edit Link and EditCar.js should be render mentioned in comments ?? (This Should be first priority, if it is not possible then first point will also acceptable)

       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;
   

The Link for the Code is : https://codesandbox.io/s/inventory-forked-yhg20 . Edit the Code in CodeSandBox will be helpfull. Ask me if my information is incomplete

Answer 1

What happens if a user visits /edit directly? Then ShowCars component is never rendered so there would be no /edit route.

So I'm not really sure about option 2. But you can do:

1. You can navigate to /edit/<carId>, there you have the car id and can render the right car.

2. If you don't want the id in your path, you can use save the car id to the state of to object. See here

3. Save the car id in global context

Edit:

Here is the codesandbox

I think in Header.js you should add a slash at the beginning of "showcar" path