open-index/open-npm huggingface dataset:
npm package: @jackgougou/demo-comp
Description: @jackgougou/demo-comp
Latest version: 0.0.1

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @jackgreen/react-router-view
Description: 全局路由组件，配置化路由，所有 Switch/Route 的地方都可以替换
Latest version: 1.2.1

# react-router-view

全局路由组件，配置化路由，所有 Switch/Route 的地方都可以替换

## 使用

[examples](https://codesandbox.io/s/react-router-view-example-rmf0o?fontsize=14&hidenavigation=1&theme=dark)

```sh
npm i @jackgreen/react-router-view
```

```js
const routes: RouteConfig[] = [
  {
    path: '/',
    component: Home,
    // 精确匹配
    exact: true
  },
  {
    path: '/single',
    component: Single
  },
  {
    path: '/multi',
    // 默认跳转到子路由
    redirect: '/multi/child1',
    component: Multi,
    childRoutes: [
      {
        path: '/multi/child1',
        component: Child1
      },
      {
        path: '/multi/child2',
        component: Child2
      }
    ]
  },
  // 配置 404
  {
    path: '/404',
    component: NotFound
  },
  // 其他没有匹配到的路由，都会重定向到 404
  // 必须放在最后，原理是渲染 Redirect 组件
  {
    path: '*',
    // 重定向到 404
    redirect: '/404'
  }
]

function Multi(props) {
  return (
    <div>
      <Link to='/multi/child1'>child1</Link>
      <Link to='/multi/child2'>child2</Link>
      // 二级路由 // 必须透传 props // props 中 routes，所以不需要单独传 routes
      <ReactRouterView {...props} />
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Link to='/single'>single</Link>
      <Link to='/multi'>multi</Link>
      // 一级路由 // 必须在 Router 中 // 并且传入 routes // 透传 props 看需求
      <ReactRouterView {...props} routes={routes} />
    </BrowserRouter>
  )
}
```

## RouteConfig 配置

继承 `RouteProps`

```tsx
import { RouteProps } from 'react-router'

export interface RouteConfig extends RouteProps {
  // 路由访问 url
  path: string
  // react 组件
  component: React.ComponentType<any>
  // 子路由，需要在本组件引入 ReactRouterView，用来渲染 Route 组件
  childRoutes?: RouteConfig[]
}
```

## 参考

- [react route config](https://reacttraining.com/react-router/web/example/route-config)

- [vue-router](https://router.vuejs.org/zh/)