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…