反應路由器如何點擊通過到詳細組件

Question

我有兩個組件汽車和CarDetails 我想顯示所有的汽車組件與超鏈接/鏈接，當用戶點擊它應通過carid（參數（S） ），以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 此組件顯示通過paramater car.id

import React, { Component } from 'react'; 

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

export default Carnama; 

我已閱讀並重新閱讀下列 https://reacttraining.com/react-router/web/example/url-params https://jaketrent.com/post/access-route-params-react-router-v4/

Answer 1

你的問題是與此塊：

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