https://github.com/frejs/use-routes

:triangular_flag_on_post: A router hook for not only react hooks API but also fre
https://github.com/frejs/use-routes

react react-rooter userouter vue-router

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/frejs/use-routes
• Owner: frejs
• Created: 2019-03-18T12:50:17.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T18:17:54.000Z (almost 2 years ago)
• Last Synced: 2024-05-05T09:02:32.733Z (8 months ago)
• Topics: react, react-rooter, userouter, vue-router
• Language: JavaScript
• Homepage:
• Size: 176 KB
• Stars: 34
• Watchers: 3
• Forks: 3
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# use-routes

> 800 Bytes router hook for Fre and React

[![](https://img.shields.io/npm/v/use-routes.svg?style=flat)](https://npmjs.com/package/use-routes)

[![](https://img.shields.io/npm/dm/use-routes.svg?style=flat)](https://npmjs.com/package/use-routes)

[![](https://img.shields.io/bundlephobia/minzip/use-routes.svg?style=flat)](https://bundlephobia.com/result?p=use-routes)

### Use

```javascript

import { h, render } from 'fre'

import { useRoutes, push } from 'use-routes'

const routes = {

  '/': () => (

    


      
home

       push('/home/jack')}>Go jack

    

  ),

  '/home/:id': ({ id }) => (

    


      
{id}

       push('/')}>Go home

    

  ),

}


const App = () => useRoutes(routes)

render(, document.getElementById('root'))

```

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

只 `history` 模式

### React

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

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

```js

resolve: {

  alias: {

    'fre': 'react'

  }

}

```

```js

import React from 'react'

import { useRoutes } from 'use-routes'

function App(){

  const result = useRoutes(routes)

  return result || 

}

```

#### useRoutes

```JSX

function App(){

  const result = useRoutes(routes)

  return result || 

}

```

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

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

#### redirect

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

```jsx

const routes = {

  '/': '/home',

  '/home': Home,

}

```

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

#### A link

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

```JSX

Go jack

```

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

#### License

_MIT ©132yse, inspired by routerhook_