React的路由深入

本篇深入React路由的参数获取、路由的两种模式

续上篇：React的路由基本使用

本篇代码还是基于之前的代码继续深入

React路由的参数获取

从react-router-dom包中导入Link组件，注意这里使用解构

然后使用Link组件给商品添加商品链接，通常是商品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>商品列表</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>;
    }
}

添加商品详情组件

获取路由参数的方式：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>
    }
}

给我们自定义的路由组件添加到商品详情的路由

并且注意这里需要给商品之前的商品路由"/products"这个Route组件添加exact这个属性，因为没有添加exact的情况会全局匹配

exact表示精准匹配

// 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="/">首页</Link></li>
                    <li><Link to="/products">商品</Link></li>
                    <li><Link to="/news">新闻</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>
    }
}

修改php实现的商品接口，给商品列表添加商品id数据返回

<?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' => '苹果皮个'],
    ['id' => 102, 'title' => 'HuaWei MAX 20', 'url' => 'https://www.246ha.com/huawei', 'desc' => '华为威武']
];

echo json_encode($shop);

访问页面，点击商品查看效果：

点击商品标题，查看跳转后获取的传参:

路由的两种模式

React 支持HTML5 History和 hash 两种路由模式

修改方式：

// file：src/components/MyRouter.js

// Hash模式
import {HashRouter as Router} from Router,

// HTML5 History模式
import {BrowserRouter as Router} from Router,

原文链接：https://www.mi360.cn/articles...