https://github.com/native-router/react

A route close to the native experience for react.
https://github.com/native-router/react

async data-fetching react react-router router tiny

Last synced: about 1 month ago
JSON representation

A route close to the native experience for react.

• Host: GitHub
• URL: https://github.com/native-router/react
• Owner: native-router
• Created: 2021-09-27T12:10:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-17T07:59:13.000Z (about 1 year ago)
• Last Synced: 2024-09-30T23:48:27.670Z (about 1 month ago)
• Topics: async, data-fetching, react, react-router, router, tiny
• Language: TypeScript
• Homepage: https://native-router.github.io/react/
• Size: 3.22 MB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README-zh_CN.md

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/@native-router/react.svg)](https://www.npmjs.com/package/@native-router/react)

[![Build Status](https://github.com/native-router/react/actions/workflows/ci.yml/badge.svg)](https://github.com/native-router/react/actions)

[![codecov](https://codecov.io/gh/native-router/react/graph/badge.svg?token=QIXC6HJH6Z)](https://codecov.io/gh/native-router/react)

[![install size](https://packagephobia.now.sh/badge?p=@native-router/react)](https://packagephobia.now.sh/result?p=@native-router/react)

# Native Router React

> 接近原生体验的 React 路由库。

[English](./README.md) | 简体中文

## 特性

- 异步导航

- 可取消

- 页面视图和数据并发拉取

- 链接页面预加载及预览

- 轻量小巧，Tree-Shaking 友好

- 支持 TreeShaking

## 安装

```bash

npm i @native-router/react

```

## 使用

```tsx

import {View, HistoryRouter as Router} from '@native-router/react';

import Loading from '@/components/Loading';

import RouterError from '@/components/RouterError';

import * as userService from '@/services/user';

export default function App() {

  return (

     import('./Layout'),

        children: [

          {

            path: '/',

            component: () => import('./Home')

          },

          {

            path: '/users',

            component: () => import('./UserList'),

            data: userService.fetchList

          },

          {

            path: '/users/:id',

            component: () => import('./UserProfile'),

            data: ({id}) => userService.fetchById(+id)

          },

          {

            path: '/help',

            component: () => import('./Help')

          },

          {

            path: '/about',

            component: () => import('./About')

          }

        ]

      }}

      baseUrl="/demos"

      errorHandler={(e) => }

    >

      

      

    

  );

}

```

查看 [完整示例](/demos/)。

## 文档 

[API](https://native-router.github.io/react/modules.html)