react-实现一个简单的页面转跳路由

简单实现一个react-router

核心步骤如下：

• 先把URL解析path出来
• 然后匹配routes数组，找到path相同，返回出去即可
• 这时候会有一个问题，页面没法更新数据，所以用onhashchange监听
• 重新渲染
• 提供执行钩子，也就是写路由文件的时候，页面设置成一个函数，然后方便执行到的时候，进行数据更新等处理

最终代码

const Main = (root: HTMLElement | null) => {
   let getPath = (url: string): string => {
      let href = url.split('#')[1]
      return href ? href.split('?')[0] : '/'
   }
   let getView = (urlPath: string) => {
      let pageInfo = routes.find((route: Troute) => route.path === urlPath)
      let pagePath = pageInfo ? pageInfo.path : ''
      return <div>
         {
            routes.map(e => {
               let view: ReactElement | Boolean
               if (e.path === pagePath) {
                  view = e.page()
               } else {
                  view = false
               }
               return view
            }).filter(e => e)
         }
      </div>
   }
   window.onhashchange = (e: HashChangeEvent) => {
      ReactDOM.render(getView(getPath(e.newURL)), root)
   }
   ReactDOM.render(getView(getPath(location.href)), root)
}

Main(
   document.getElementById('root')
)

类型

import { ReactElement } from 'react'
export interface Troute {
    path: string,
    page: () => ReactElement
}

Main函数的代码可以优化下

const Main = (root: HTMLElement | null) => {
   let getPath = (url: string): string => {
      let href = url.split('#')[1]
      return href ? href.split('?')[0] : '/'
   }
   let getView = (urlPath: string) => {
      let pageInfo = routes.find((route: Troute) => route.path === urlPath)
      return <div>{pageInfo && pageInfo.page()}</div>
   }
   window.onhashchange = (e: HashChangeEvent) => {
      ReactDOM.render(getView(getPath(e.newURL)), root)
   }
   ReactDOM.render(getView(getPath(location.href)), root)
}

具体代码查看我的项目【可视化布局 纯css布局 Layout-UI 】
GITHBU： https://github.com/0123cf/layout-ui
自动化可视化布局官网： http://layoutui.pro/

--END--