React@16.x（48）路由v5.x（13）源码（5）- 实现 Switch

1，原生 Switch 的渲染内容

对如下代码来说：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function News() {
    return <div className="page news">News</div>;
}

function Goods() {
    return <div className="page goods">Goods</div>;
}

export default function App() {
    return (
        <Router>
            <Switch>
                <Route path="/page1" component={News}></Route>
                <Route path="/page2" component={Goods}></Route>
            </Switch>
        </Router>
    );
}

React 插件展示的内容：

可以看到，除了也使用了 Router 的上下文之外，只加载了一个 Route 组件。

2，实现

经测试，Switch 的子元素有如下规则：

• 如果不是 Route 组件，则会报错。
• 如果只有一个 Route 组件，则得到的 props.children 的类型是对象。
• 如果有多个 Route 组件，则得到的 props.children 的类型是数组。

所以，除了做以上特殊的判断外，再加上渲染第一个匹配到的组件的逻辑即可。

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

export class Switch extends Component {
    getChildren = ({ location }) => {
        let children = [];
        if (Array.isArray(this.props.children)) {
            children = this.props.children;
        } else if (typeof this.props.children === "object") {
            children = [this.props.children];
        }
        for (const child of children) {
            if (child.type !== Route) {
                throw new TypeError("子元素非 Route 组件");
            }
            const { path = "/", exact = false, strict = false, sensitive = false } = child.props;
            const result = matchPath(path, location.pathname, {
                exact,
                strict,
                sensitive,
            });
            if (result) {
                return child;
            }
        }
        return null;
    };
    render() {
        return <ctx.Consumer>{this.getChildren}</ctx.Consumer>;
    }
}

注意到，判断是否是 Route 组件，可通过引入的 Route 组件直接进行判断。

---

以上。