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

700 Bytes router hook for react and fre

Use

import React from 'react'
import ReactDOM from 'react-dom'
import { useRoutes, push } from 'use-routes'

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 为组件

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

useRoutes

function App(){
  const result = useRoutes(routes)
  return result || <NotFound />
}

useRoutes 返回一个组件，这个组件会根据 pathname 和 routes 的 key 匹配

如果匹配不到，可以事先准备一个全局的 404 组件 √

redirect

重定向，只需要将 routes 对象的 value 变成需要重定向的路径字符串即可

const routes = {
  '/': '/home',
  '/home': <Home />,
}

如上，当匹配到跟路径，会跳转到 home 路径，并渲染 home 组件

A link

方便跳转，默认也对外暴露了一个 A 组件，作用和 Link 组件一样：

<A href='/home/jack'>Go jack</A>

标签属性和 a 标签一样，只是默认做了阻止冒泡

use-routes

Package Exports

Readme

use-routes

Use

useRoutes

redirect

A link

License