Package Exports

use-routes

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-routes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-routes

A router hook for react and fre

Use

import React from 'react'
import ReactDOM from 'react-dom'
import { useRoutes, push } from './router'

const routes = {
  '/': () => (
    <>
      <p>home</p>
      <button onClick={() => push('/home/jack')}>Go jack</button>
    </>
  ),
  '/home/:id': ({ id }) => (
    <>
      <p>{id}</p>
      <button onClick={() => push('/')}>Go home</button>
    </>
  )
}

const App = () => useRoutes(routes)

ReactDOM.render(<App />, document.getElementById('root'))

以上，首先定义一个路由的对象，key 为正则路径，value 为组件

然后 useRoutes 返回一个组件，这个组件会根据 pathname 进行匹配渲染

history 模式，但支持浏览器刷新