リアクションルータの詳細をクリックする方法

Question

私は2つのコンポーネントを持っています。車と車詳細 車のコンポーネントにすべての車をハイパーリンク/リンクで表示したいと思っています。ユーザーがクリックすると、 ）CarDetailsコンポーネントへ

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 このコンポーネントは、クリックされたハイパーリンクを持つすべての車がその特定の車のための表示詳細

carnama.jsを呼び出します表示します

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 このコンポーネントは、私はあなたの問題は、このブロックである読んで、再読み込み、次の https://reacttraining.com/react-router/web/example/url-params https://jaketrent.com/post/access-route-params-react-router-v4/

Answer 1

いる渡されたのparamaterが

import React, { Component } from 'react'; 

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

export default Carnama; 

をcar.id表示されます。

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は、次の配列を返します。それぞれが<Router>コンポーネントで包まれた反応コンポーネント。私はそれが動作するかどうか分からないので、それをテストしたが、以下のような何かをしようとしていない：

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