npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vite-plugin-react-router-pages

v1.1.4

Published

基于文件的约定式路由插件。

Downloads

103

Readme

vite-plugin-react-router-pages

基于文件的约定式路由插件。

介绍

特性

  • vite + react + react-router v6
  • 嵌套路由 nested
  • 页面组件 index.page.tsx
  • 布局组件 layout.tsx
  • 动态路径 :name
  • lazy + code-splitting
  • 路由类型支持 PagesRoutes.xxxx

目录结构

[you project name]
- src
  - pages
    - home
      - index.page.tsx // 页面组件
      - layout.tsx  // 布局组件
    - user
      - [userUUID] // 动态路径
        - index.page.tsx
        - layout.tsx
      - setting // 可不提供 layout.tsx,默认 layout 为 <Outlet />
        - email
          - index.page.tsx // 嵌套路由
- react-pages.d.ts // vite 启动生成的的类型文件

已知不支持

  • 可选路径 :name?没想好怎么在文件路径上提现,如果你有好的想法,请联系我。

DEMO

./examples/react

安装

1 Install

npm i -D vite-plugin-react-router-pages

2 Vite config

添加插件 vite-plugin-react-router-pagesvite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import pages from 'vite-plugin-react-router-pages';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), pages()],
});

3 tsconfig.json

vite 启动后会插件会生成 react-pages.d.ts,可添加到 tsconfig.json,以便获得 typescript 支持。

{
  "compilerOptions": {
    "types": ["vite/client", "./react-pages.d.ts"]
  }
}

使用

1 virtual:react-pages

导入 import { pagesRoutes, PagesRoutes } from "virtual:react-pages";

其中

  • pagesRoutesRouteObject[], 可以直接用于 useRoutes(pagesRoutes)
  • PagesRoutes 存储路由路径,可通过 PagesRoutes.HOME 访问页面路径。
import { useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import {
  BrowserRouter as Router,
  useRoutes,
  Navigate,
  useNavigate,
  generatePath,
} from 'react-router-dom';
import { pagesRoutes, PagesRoutes } from 'virtual:react-pages';

const routes = [
  {
    path: '/',
    element: <Navigate to={PagesRoutes.HOME} />,
  },
  ...pagesRoutes,
];

console.log(routes);

function App() {
  const navigate = useNavigate();
  const handleClick = useCallback(() => {
    navigate(generatePath(PagesRoutes['USER_[USERUUID]'], { userUUID: 'danzi' }));
  }, [navigate]);

  return (
    <div className="app">
      <button onClick={handleClick}>navigate user/danzi</button>
      {useRoutes(routes)}
    </div>
  );
}

const app = createRoot(document.getElementById('root')!);
app.render(
  <Router>
    <App />
  </Router>
);

2 类型支持

由于 react-pages.d.ts 的类型支持,你可以很方便的获取到路由路径。

对于动态路径,如 /user/:userUUID,通过 PagesRoutes['USER_[USERUUID]'] 访问,由于路径上清晰的提现了参数 [USERUUID],你可以很方便知道参数是 userUUID

import { useNavigate, generatePath } from 'react-router-dom';

navigate(generatePath(PagesRoutes['USER_[USERUUID]'], { userUUID: 'danzi' }));

Configuration

interface Config {
  /** 默认 ./src/pages/ */
  pagesPath?: string;
  /** 生成 d.ts 的目录。 默认 ./react-pages.d.ts */
  declarePath?: string;
}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import pages from 'vite-plugin-react-router-pages';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    pages({
      pagesPath: './src/pages/',
      declarePath: './react-pages.d.ts',
    }),
  ],
});

FAQ

1. 为什么不使用 vite-plugin-pages

  • vite-plugin-pages 的 React 部分是 experimental 的,不稳定。其实现覆盖 Vue React Solid,不免有些复杂,不好 fork 来改。
  • 我看到基于约定式路由能做更多事情,比如生成 PagesRoutes,and more。
  • 研究后发现,非常容易实现,且社区没有一个相对成熟的。

开发

1 安装依赖 pnpm i 2 运行 demo cd examples/react pnpm dev 3 开发调试,修改代码后在根目录 pnpm build,再跑第 2 步看效果。

交流