Type Route 开源项目教程

Type Route 开源项目教程

type-routeThe flexible, type safe routing library.项目地址:https://gitcode.com/gh_mirrors/ty/type-route

项目介绍

Type Route 是一个灵活且类型安全的路由库，构建在支持 React Router 的核心库之上。它不依赖于特定的 UI 框架，尽管文档中的大多数代码示例使用 React。Type Route 的设计旨在提供无缝的 React 集成，同时也适用于其他框架。

项目快速启动

安装

首先，确保你已经安装了 React 16.8 或更高版本，因为它是 Type Route 的 peer dependency。然后通过 npm 安装 Type Route：

npm install type-route react

创建路由

使用 Type Route 创建路由非常简单。以下是一个基本的路由配置示例：

import { createRouter, defineRoute, param } from 'type-route';

export const { RouteProvider, useRoute, routes } = createRouter({
  home: defineRoute("/"),
  userList: defineRoute(
    { page: param.query.optional.number },
    () => "/user"
  ),
  user: defineRoute(
    { userId: param.path.string },
    (p) => `/user/${p.userId}`
  )
});

连接路由到应用

在你的应用中使用 RouteProvider 包裹整个应用，并在需要的地方使用 useRoute 获取当前路由：

import React from 'react';
import ReactDOM from 'react-dom';
import { RouteProvider } from './router';
import { Navigation } from './Navigation';
import { Page } from './Page';

function App() {
  return (
    <>
      <Navigation />
      <Page />
    </>
  );
}

ReactDOM.render(
  <RouteProvider>
    <App />
  </RouteProvider>,
  document.querySelector("#root")
);

显示当前路由

根据当前路由显示不同的页面内容：

import React from 'react';
import { useRoute, routes } from './router';
import { HomePage } from './HomePage';
import { UserListPage } from './UserListPage';
import { UserPage } from './UserPage';

export function Page() {
  const route = useRoute();
  return (
    <>
      {route.name === "home" && <HomePage />}
      {route.name === "userList" && <UserListPage route={route} />}
      {route.name === "user" && <UserPage route={route} />}
      {route.name === false && "Not Found"}
    </>
  );
}

应用案例和最佳实践

导航组件

在单页应用中，导航组件是必不可少的。以下是一个简单的导航组件示例：

import React from 'react';
import { routes } from './router';

export function Navigation() {
  return (
    <nav>
      <a {...routes.home().link}>Home</a>
      <a {...routes.userList().link}>User List</a>
      <a {...routes.userList({ page: 2 }).link}>User List Page 2</a>
      <a {...routes.user({ userId: "abc" }).link}>User "abc"</a>
    </nav>
  );
}

页面组件

每个页面组件可以根据路由参数显示不同的内容。例如，UserPage 组件可以根据 userId 参数显示特定用户的信息：

import React from 'react';
import { Route } from 'type-route';
import { routes } from './router';

function UserPage({ route }: { route: Route<typeof routes.user> }) {
  return <div>User: {route.params.userId}</div>;
}

典型生态项目

Type Route 可以与许多其他开源项目集成，例如：

• React Router: 尽管 Type Route 提供了更简洁的 API 和更好的类型安全，但它可以与 React Router 一起使用，以满足更复杂的路由需求。
• Redux: 用于状态管理，可以与 Type Route 结合使用，以确保路由状态的一致性。
• Next.js: 用于服务器端渲染和静态站点生成，Type Route 可以作为其路由系统的补充。

通过这些集成，Type Route 可以为你的应用提供一个强大且灵活的路由

type-routeThe flexible, type safe routing library.项目地址:https://gitcode.com/gh_mirrors/ty/type-route