React@16.x（49）路由v5.x（14）源码（6）- 实现 withRouter

目录

• 1，原生 withRouter 的渲染内容
• 2，实现

作用：为了将路由的上下文信息，作为属性注入到组件中，参考

1，原生 withRouter 的渲染内容

对如下代码来说：

import { BrowserRouter as Router, withRouter } from "react-router-dom";

function Test(props) {
    return <div>{props.to}</div>;
}

const TestWrap = withRouter(Test);

export default function App() {
    return (
        <Router>
            <TestWrap></TestWrap>
        </Router>
    );
}

React 插件展示的内容：

2，实现

import React from "react";
import ctx from "./RouterContext";

export function withRouter(Comp) {
    function RouterWrapper(props) {
        return (
            <ctx.Consumer>
                {(value) => {
                    <Comp {...value} {...props}></Comp>;
                }}
            </ctx.Consumer>
        );
    }
    // 设置 React 插件中展示的名称。
    RouterWrapper.displayName = `withRouter(${Comp.displayName || Comp.name})`;
    return RouterWrapper;
}

---

以上。