基于history实现路由里的Route

最新推荐文章于 2024-07-30 09:36:51 发布

web老猴子

最新推荐文章于 2024-07-30 09:36:51 发布

阅读量400

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/web220507/article/details/126624952

版权

本文档详细讲解了如何基于history实现React路由中的Route组件。首先介绍了Router组件的作用，接着阐述了如何封装Route组件，利用Router上下文数据实现子组件的动态渲染。通过检查children、render和component属性，根据不同的条件进行渲染。最后，简述了测试过程及Route组件在实际应用中的作用。

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

前言

在前面的篇章中，我们主要介绍了如何实现react路由里的Router组件，在《基于history实现路由里的Router 》这个篇章里，我们了解到Router组件的主要功能是通过关联地址栏，给后代组件提供上下文数据。

本篇章我们将要实现一个Route组件，通过Route组件实现上下文数据的消费使用。

封装Route

通过Router组件提供的上下文，我们可以利用该上下文，实现子组件的动态渲染。

import React, { Component } from 'react'
import ctx from "./RouterContext";

// 之前篇章中通过path-to-regexp封装的地址匹配规则
import matchPath from "./matchPath";

export default class Route extends Component {// 封装：通过上下文动态匹配符合的子组件然后渲染renderChildren(ctx) {if (this.props.children !== undefined && this.props.children !== null) {if (typeof this.props.children === "function") {return this.props.children(ctx);}else {return this.props.children;}}if (!ctx.match) {return null;}