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;

重向定想看到效果，就自己在地址欄輸入一個沒有的路徑進行查看
效果演示