反应路由器如何点击通过到详细组件

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