react-router5 - 实现 Switch 和 Redirect 组件

用法

 <HashRouter>
    <Link to='/'>home</Link>
    <Link to='/about'>about</Link>
    <Link to='/mine'>mine</Link>
    <div>
      <Switch>
        <Route component={Home} path='/' exact></Route>
        <Route component={About} path='/about'></Route>
        <Route component={Mine} path='/mine'></Route>
      </Switch>
    </div>
  </HashRouter>

作用

它的作用是 一旦匹配到某个路径， 就立即停止在向下匹配，并渲染该路径对应的组件，和js中的switch...case 的逻辑差不多,

实现

import { Component } from 'react';
import Context from './Context';
import { isMatch } from './utils';
// 一旦匹配成功，就不再向后匹配了
class Switch extends Component {
  static contextType = Context;
  render() {
    let { children } = this.props;
    // 由于children 的值只有一个时，就是对象， 1个以上才是数组，所以先都转化成数组
    children = Array.isArray(children) ? children : [children];
    for (let i = 0; i < children.length; i++) {
      if (isMatch(this.context, children[i].props)) {
        return children[i];
      }
    }
    return null;
  }
}
export default Switch;

---

---

Redirect 组件

• 该组件就是，重定向路径（路径不匹配， 或者只有访问的是某个路径时，才进行跳转，也就是 from 和 to 混用）
• from 只有当路径是这个的时候，才会进行to 的重定向
  核心逻辑就是直接跳转

import { Component } from 'react';
import Context from './Context';
class Redirect extends Component {
  static contextType = Context;
  componentDidMount() {
    const { from, to } = this.props;
    const { pathname } = this.context.location;
    // 没有传入from 或者 传入的from 和上下文的 pathname 一样才进行跳转
    if (!from || from === pathname) {
      this.context.history.push(to);
    }
  }
  render() {
    return null;
  }
}
export default Redirect;

重向定想看到效果，就自己在地址栏输入一个没有的路径进行查看
效果演示