React -- 自己实现一个react-router-dom里面的一些组件(简单路由）

最新推荐文章于 2024-04-23 19:54:30 发布

wust_cyl

最新推荐文章于 2024-04-23 19:54:30 发布

阅读量812

点赞数

分类专栏： React 文章标签： React -- 自己实现一个react-router-do

本文链接：https://blog.csdn.net/wust_cyl/article/details/88931305

版权

这篇博客介绍了如何自己实现React的HashRouter组件和简单路由功能，利用window的hashchange事件监听/#/后的哈希变化。内容涵盖location.pathname、history.push、match.url等关键属性的实现，并使用context进行父子组件通信。还提到了Route、Link、Switch组件的构建，以及pathtoregexp库的应用。通过创建一个存储用户信息并展示的简单应用，展示了路由的实际运用。

摘要由CSDN通过智能技术生成

本次主要实现的是Hash路由，也就是监听/#/后面的hash值得变化。

使用过react的都知道，this.props上面有一个比较重要的属性location,match, history等，这一次我们实现里面的几个简单属性，用于完成路由,如下：

location: {pathname } history: { push} match: { url, path, params}

由于设计到父子组件传递，所有我们用到了context.

对于hash的改变我们可以在window注册hashchange事件。

HashRouter组件

import React, { Component } from "react";
import RouteContext from "./RouteContext";
 

export default class HashRouter extends Component {
    constructor (props) {
        super(props);
        this.state = { location: {}, history: {}, match: {}};
        this.handleHash = this.handleHash.bind(this);
    }
    handleHash () {
        const hash = window.location.hash.slice(1); //获取#后面的路径
        this.setState( (perProps, perState) => {
            return {
                ...perState,
                location: {