React Router How To Click Thru To Detail Components

I have two components Car and CarDetails I want to display all cars in the cars component with a hyperlink /link to and when the user clicks it should pass carid(param(s))to CarDe

Solution 1:

Your issue is with this block:

const carNode = cars.map((car) => {
    return (
        <Router>
              <div>

                <Link
                    to={{ pathname: '/Carnama/'+car.id}}
                    className="list-group-item"
                    key={car.id}>
                    {car.name}
                </Link>

                <Route path="/Carnama:id" component={Carnama}/>
                </div>

        </Router>
    )
});

Array.map will return a new array of React components, each wrapped in a <Router> component. I haven't tested it so I'm not sure if it will work, but try something like the below:

const carNode = cars.map((car, i) => {
    return (
              <div key={i}>
                <Link
                    to={{ pathname: '/Carnama/'+car.id}}
                    className="list-group-item"
                    key={car.id}>
                    {car.name}
                </Link>
              </div>
    )
});
return (
    <div>
        <h1>Cars page</h1>
        <div className="list-group">
        <Router>
        {carNode}
        <Route path="/Carnama:id" component={Carnama}/>
        </Router>
        </div>
    </div>
);