简易手写react-router(函数式组件)

自己实现一个react-router

期望最简单的使用效果

export default () => {
      return (
        <>
            <Link to="/a">菜单a</>
            <Link to="/b">菜单b</>
        </>
        <Router>
            <Route path="/a"><A /></Route>
            <Route path="/b"><B /></Route>
        </Router>
      )
}

Router一般分HashRouter和BrowserHistoryRouter，原理区别分别是对location.hash和history api的处理

---

先写一些公用组件

// Link
const Link = ({ children }) => <a>children</a>

// Route 
const Route = () => {}

---

实现HashRouter

原理是在Link上绑定点击更改hash值事件，利用浏览器监听hash值的变化做相应的动作（渲染相应组件），因为是函数组件，会用到useEffect，useState

// HashRouter
const HashRouter = ({ children }) => {
  const [hash, setHash] = useState(window.location.hash)
  // hash变更触发
  const hashChange = e => {
      const { newURL } = e
      setHash(newURL.slice(newURL.indexOf('#')))
  }
  // 记得销毁时要清除绑定
  useEffect(() => {
    window.addEventListener('hashchange', hashChange)
    return window.removeEventListener('hashchange', hashChange)
  }, [])
 // 为什么不用children遍历，因为children有3种情况（1. 没子组件会返回undefined 2.单个子组件返回一个对象 3.多个子组件返回数组），而React.Children会自行判断，比较安全，当然要多个null兜底，因为返回undefined也会报错
  return React.Children.map(children, child => {
      if(child.type.name === 'Route') {
        if(child.props.path === hash) {
            return child.props.children
        }
        return null
      }
      return child.props.children
  }) || null
}

相应Link也要添加点击逻辑

const Link = ({ to, children, handleClick }) => {
    const handleClick = () => window.location.hash = to
    <span onClick={handleClick}>{children}</span>
}

加一点排版

最简单的功能就这样完成了

...
<div id='menu'>
    <div><Link to='a'>a组件</Link></div<
</div>
<div id='container'>
    <HashRouter>
       <Route path='/a'><A /></Route>
    </HashRouter>
</div>

---

接着搞嵌套路由看看

export default () => <div style={containerStyle}>
  <div style={menuStyle}>
    <div><Link to='#/a'>a组件</Link></div>
    <div><Link to='#/b'>b组件</Link></div>
    <div><Link to='#/c'>C组件</Link></div>
  </div>
  <div style={contentStyle}>
    <HashRouter>
      <Route path="#/a"><A /></Route>
      <Route path="#/b"><B /></Route>
      <Route path="#/c"><C /></Route>
    </HashRouter>
  </div>

</div>

const C1 = () => <div>我是C1</div>
const C2 = () => <div>我是C2</div>

const C = () => (
  <div>
    <Link to='#/c/c1'>C1组件</Link>
    <Link to='#/c/c2'>C2组件</Link>
    <div style={contentStyle}>
      <h2>c下面的组件</h2>
      <HashRouter>
        <Route path="#/c/c1"><C1 /></Route>
        <Route path="#/c/c2"><C2 /></Route>
      </HashRouter>
    </div>
  </div>
)

#/c的效果 点击C1

点击C1或C2的Link，发现整个C都消失了，分析到因为当前hash应当是#/c/c1，而C组件本身对于要在#/c的时候才会渲染，用全等判断自然不会渲染出来，子组件C1和C2肯定也不会出来

hash全等

将全等改成includes，发现效果出来了

    if (child.type.name === 'Route') {
      if (hash.includes(child.props.path)) {
        return child.props.children
      }
      return null
    }

改动后

待续更新BrowserRouter