React的路由深入

Zack 发布于2019-08-26 10:15 / 1580人阅读

摘要：本篇深入路由的参数获取路由的两种模式续上篇的路由基本使用本篇代码还是基于之前的代码继续深入路由的参数获取从包中导入组件，注意这里使用解构然后使用组件给商品添加商品链接，通常是商品商品列表添加商品详情组件获取路由参数的方式给我们自定义

本篇深入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 
            商品列表
            {this.state.shop.map((item) => {
                return 
                    {item.title}
                    {item.desc}
                    
            })}
        ;
    }
}

添加商品详情组件

获取路由参数的方式：this.props.match.params

// file：src/components/Detail.js

import React from "react";

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

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

并且注意这里需要给商品之前的商品路由"/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 
            
                
                    首页
                    商品
                    新闻
                

                

                
                
                
                
            
        
    }
}

修改php实现的商品接口，给商品列表添加商品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...

GPU云服务器云服务器基于路由的webrtc php的路由配置支持linux的路由路由器的设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105863.html

React路由深入实战用户登录

摘要：本篇基于路由来实战用户登录功能，会涉及到表单的数据绑定表单提交和登录判断等新玩意。本篇基于React路由来实战用户登录功能，会涉及到表单的数据绑定、表单提交和登录判断等新玩意。 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 续上篇：React的路由深入先来创建一个组件 - 登录表...

williamwen1986 2019-08-26 10:15 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

imingyu 2019-08-20 14:22 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

VPointer 2019-08-01 16:19 评论0 收藏0
从路由原理出发，深入阅读理解react-router 4.0的源码

摘要：通过前端路由可以实现单页应用本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从的源码出发，深入理解是如何实现前端路由的。执行上述的赋值后，页面的发生改变。 react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现...

Miyang 2019-08-23 12:01 评论0 收藏0