xyzdata/react-router-dom-props-route.data.md Secret

## react-router-dom-props-route.data.md

      
    Raw
  

              react-router-dom-props-route.data.md
            
          
    React components & react-router-dom

props & route.data


const cars = this.props.route.data;

car

    
import React, { Component } from 'react';
import { Link } from 'react-router';

class Car extends Component {
    render(){
        // Get data from route props
        const cars = this.props.route.data;
        console.log(`cars = ${cars}`);
        console.log(`cars[0] = ${cars[0]}`);
        console.log(`cars make = ${cars[0].make}`);
        console.log(`cars price = ${cars[0].price}`);
        console.log(`cars make = ${cars[1].make}`);
        console.log(`cars price = ${cars[1].price}`);
        // Map through cars and return linked cars
        const carNode = cars.map((car) => {
            return (
                <Link
                    to={"/cars/"+car.id}
                    className="list-group-item"
                    key={car.id}>
                    {car.name}
                </Link>
            )
        });
        return (
            <div>
                <h1>Cars page</h1>
                <div className="list-group">
                    {carNode}
                </div>
            </div>
        );
    }
}

export default Car;
cars details

    
import React, { Component } from 'react';
import { browserHistory } from 'react-router';

class CarDetail extends Component {
    handleRedirect(){
        browserHistory.push('/cars');
    }
    render(){
        const cars = this.props.route.data;
        // data
        const id = this.props.params.id;
        // params
        console.log(`&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&`);
        console.log(`typeof id = ${typeof(id)}`);
        console.log(`params.id = ${id}`);
        
        // number
        const car = cars.filter(car => {
            console.log(`******************************************************`);
            console.log(`car.id = ${car.id}`);
            console.log(`typeof car.id = ${typeof(car.id)}`);
            // number
            if(car.id == id) {
                return car;
            }
        });
        return (
            <div>
                <h1>{car[0].name}</h1>
                <div className="row">
                    <div className="col-sm-6 col-md-4">
                        <div className="thumbnail">
                            <img src={car[0].media} alt={car[0].name} />
                        </div>
                    </div>
                    <div className="col-sm-6 col-md-4">
                       <ul>
                           <li><strong>Model</strong>: {car[0].model}</li>
                           <li><strong>Make</strong>: {car[0].make}</li>
                           <li><strong>Year</strong>: {car[0].year}</li>
                           <li><strong>Price</strong>: {car[0].price}</li>
                       </ul>
                    </div>
                    <div className="col-md-12">
                        <button className="btn btn-default" onClick={this.handleRedirect.bind(this)}>Go to Cars</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default CarDetail;
index

    
function Welcome(props) {
    return (
        <Router history={browserHistory}>
            <Route component={Main}>
                <IndexRoute component={Home} />
                <Route path="/" component={Home}/>
                {/*<IndexRoute component={Home} />*/}
                <Route path="/cars" component={Car} data={data}/>
                {/* Parameter route*/}
                <Route path="/cars/:id" component={CarDetail} data={data}/>
                <Route path="/about" component={About}/>
            </Route>
        </Router>
    );
}
datas

const data = [
    {
        id: 1,
        name: 'Honda Accord Crosstour',
        year: '2010',
        model: 'Accord Crosstour',
        make: 'Honda',
        media: 'http://media.ed.edmunds-media.com/honda/accord-crosstour/2010/oem/2010_honda_accord-crosstour_4dr-hatchback_ex-l_fq_oem_4_500.jpg',
        price: '$16,811'

    },
    {
        id: 2,
        name: 'Mercedes-Benz AMG GT Coupe',
        year: '2016',
        model: 'AMG',
        make: 'Mercedes Benz',
        media: 'http://media.ed.edmunds-media.com/mercedes-benz/amg-gt/2016/oem/2016_mercedes-benz_amg-gt_coupe_s_fq_oem_1_717.jpg',
        price: '$138,157'

    },
    {
        id: 3,
        name: 'BMW X6 SUV',
        year: '2016',
        model: 'X6',
        make: 'BMW',
        media: 'http://media.ed.edmunds-media.com/bmw/x6/2016/oem/2016_bmw_x6_4dr-suv_xdrive50i_fq_oem_1_717.jpg',
        price: '$68,999'
    },
    {
        id: 4,
        name: 'Ford Edge SUV',
        year: '2016',
        model: 'Edge',
        make: 'Ford',
        media: 'http://media.ed.edmunds-media.com/ford/edge/2016/oem/2016_ford_edge_4dr-suv_sport_fq_oem_6_717.jpg',
        price: '$36,275'
    },
    {
        id: 5,
        name: 'Dodge Viper Coupe',
        year: '2017',
        model: 'Viper',
        make: 'Dodge',
        media: 'http://media.ed.edmunds-media.com/dodge/viper/2017/oem/2017_dodge_viper_coupe_acr_fq_oem_3_717.jpg',
        price: '$123,890'
    }
];