React router how to click thru to detail components

Question

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 CarDetails component

App.js

import React, { Component } from 'react';
import Cars from './components/Cars';
import CarDetails from './components/Car-details'
import {
BrowserRouter as Router,
Route,
Link
   } from 'react-router-dom'


class App extends Component {

 render() {
 const data = [
  {
      id: 1,
      name: 'Honda Accord Crosstour',
      year: '2017',
      model: 'Accord Crosstour',
      make: 'Honda'

  },
  {
      id: 2,
      name: 'Mercedes-Benz AMG GT Coupe',
      year: '2016',
      model: 'AMG',
      make: 'Mercedes Benz'


  }

 ];
return (

  <div className="App">


    <hr/>

    <Cars varCars={data}/>

   </div>


     );
  }
}

export default App;

Cars.js This component displays all the cars with a hyperlink when clicked will call carnama.js which display details for that specific car

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
    } from 'react-router-dom';

  import Carnama from './Carnama'

 class Cars extends Component {

constructor(props) {
    super(props)
  }
render(){

    const cars = this.props.varCars;
    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>
        )
    });
    return (
        <div>
            <h1>Cars page</h1>
            <div className="list-group">
            {carNode}
            </div>
        </div>
    );
  }
 }

export default Cars;

Carnama.js this component displays the passed paramater car.id

import React, { Component } from 'react';

 class Carnama extends Component {
  render() {
    return (
        <div>
           <h1>Car Details</h1> 
        </div>
     );
    }
  }

 export default Carnama;

I have read and re-read the following https://reacttraining.com/react-router/web/example/url-params https://jaketrent.com/post/access-route-params-react-router-v4/

Answer 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>
);