In this paper, two modes of route parameters acquisition and route are discussed.

Continuation: Basic use of route in React

This code is still based on the previous code.

Parameter acquisition of React route

Import the Link component from the react router DOM package. Note the use of deconstruction here

Then use the Link component to add a product Link to the product, usually the product id.

// file: /src/components/Shop.js

'use strict';

import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

export default class News extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            shop: []
        };
    }

    componentWillMount() {
        axios('http://localhost:8000/shop.php')
            .then((res) => {
                this.setState({
                    shop: res.data
                });
            });
    }

    render() {
        return <div className="shop">
            <h1>List of commodities</h1>
            {this.state.shop.map((item) => {
                return <div key={item.id}>
                    <h3><Link to={"/products/" + item.id}>{item.title}</Link></h3>
                    <div>{item.desc}</div>
                    </div>
            })}
        </div>;
    }
}

Add item detail component

How to get route parameters: this.props.match.params

// file: src/components/Detail.js

import React from 'react';

export default class Detail extends React.Component {
    render() {
        return <div>
            {this.props.match.params.id}
        </div>
    }
}

Add route to product details for our customized route component

And note that you need to add the attribute of "exact" to the Route component of "/ products" before the product, because if you don't add "exact", it will match globally.

Exact means exact match

// file: src/components/MyRouter.js

import React from 'react';
import News from '../components/News';
import Shop from '../components/Shop';
import Detail from '../components/Detail';

import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

export default class MyRouter extends React.Component {

    render() {
        return <Router>
            <div>
                <ul className="nav">
                    <li><Link to="/">home page</Link></li>
                    <li><Link to="/products">commodity</Link></li>
                    <li><Link to="/news">Journalism</Link></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Shop} />
                <Route exact path="/products" component={Shop} />
                <Route path="/products/:id" component={Detail} />
                <Route path="/news" component={News} />
            </div>
        </Router>
    }
}

modify php Add commodity id data to commodity list to return

<?php

header('Access-Control-Allow-Origin: *');
header('Content-Type:application/json;charset=utf-8');

$shop = [
    ['id' => 101, 'title' => 'Apple 11', 'url' => 'https://Www.mi360.cn/apple ',' desc '= > apple skin'],
    ['id' => 102, 'title' => 'HuaWei MAX 20', 'url' => 'https://Www.246ha. COM / Huawei ',' desc '= > Huawei's power']
];

echo json_encode($shop);

Visit the page, click the product to view the effect:

Click the product title to view the parameters obtained after the jump:

Two modes of routing

React supports two routing modes: HTML5 History and hash

Modification method:

// file: src/components/MyRouter.js

// Hash mode
import {HashRouter as Router} from Router,

// HTML5 History mode
import {BrowserRouter as Router} from Router,

Original link: https://www.mi360.cn/articles...