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><Linkto={{pathname: '/Carnama/'+car.id}}
                    className="list-group-item"key={car.id}>
                    {car.name}
                </Link><Routepath="/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 (
              <divkey={i}><Linkto={{pathname: '/Carnama/'+car.id}}
                    className="list-group-item"key={car.id}>
                    {car.name}
                </Link></div>
    )
});
return (
    <div><h1>Cars page</h1><divclassName="list-group"><Router>
        {carNode}
        <Routepath="/Carnama:id"component={Carnama}/></Router></div></div>
);