Skip to content

🚩 A router hook for not only react hooks API but also fre

Notifications You must be signed in to change notification settings

frejs/use-routes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

use-routes

800 Bytes router hook for Fre and React

Use

import { h, render } from 'fre'
import { useRoutes, push } from 'use-routes'

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

const App = () => useRoutes(routes)

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

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

history 模式

React

use-routes 同时适用于 fre 和 react,但默认是服务于 fre 的

如果想要用于 react,可以通过 webpack 配置别名

resolve: {
  alias: {
    'fre': 'react'
  }
}
import React from 'react'
import { useRoutes } from 'use-routes'

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

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 标签一样,只是默认做了阻止冒泡

License

MIT ©132yse, inspired by routerhook

About

🚩 A router hook for not only react hooks API but also fre

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •