React Plain Router 使用教程

React Plain Router 使用教程

react-plain-router 🛣 A 2kb React router that works exactly as expected with native Javascript 项目地址: https://gitcode.com/gh_mirrors/re/react-plain-router

1、项目介绍

React Plain Router 是一个轻量级的 React 路由库，大小仅为 2kb。它旨在提供一个简单、直观的方式来处理 React 应用中的路由，完全兼容原生 JavaScript。React Plain Router 的核心思想是使用原生的 <a> 标签和 window.history.pushState() 来实现路由功能，避免了复杂的上下文管理和全局状态存储，使得路由更加可靠和易于调试。

2、项目快速启动

安装

首先，你需要在你的项目中安装 React Plain Router：

npm install react-plain-router

基本使用

以下是一个简单的示例，展示了如何在你的 React 应用中使用 React Plain Router：

// App.js
import React from 'react';
import router from 'react-plain-router';

// 使用 router 包装你的应用组件
export default router(({ path, query, hash }) => (
  <div>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于我们</a>
    </nav>
    {path === '/' && <div>欢迎来到首页</div>}
    {path === '/about' && <div>关于我们</div>}
  </div>
));

在这个示例中，router 函数接收一个回调函数，该回调函数会根据当前的 URL 路径、查询参数和哈希值来渲染不同的内容。

运行应用

确保你的 React 应用已经正确配置，然后运行以下命令启动应用：

npm start

3、应用案例和最佳实践

案例1：导航栏

你可以在不同的组件中定义导航栏，并使用原生的 <a> 标签来实现路由跳转：

// Nav.js
export default () => (
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
    <a href="https://google.com/" target="_blank">访问 Google</a>
    <a href="/terms" target="_blank">条款和条件</a>
  </nav>
);

然后在主应用组件中使用这个导航栏：

// App.js
import router from 'react-plain-router';
import Nav from './Nav';

export default router(({ path }) => (
  <div>
    <Nav />
    {path === '/' && <div>首页</div>}
    {path === '/about' && <div>关于我们</div>}
  </div>
));

案例2：手动导航

你可以使用 window.history.pushState() 来手动触发导航：

// src/actions/login.js
export default id => async dispatch => {
  const payload = await fetch(`/api/users/${id}`).then(res => res.json());
  dispatch({ type: 'USER_DATA', payload });
  window.history.pushState({}, 'Dashboard', `/dashboard`);
};

4、典型生态项目

React Plain Router 可以与其他 React 生态项目无缝集成，例如：

• React Router: 如果你需要更复杂的路由功能，可以结合 React Router 使用。
• Redux: 用于状态管理，可以与 React Plain Router 一起使用来管理应用的状态。
• Next.js: 如果你需要服务器端渲染（SSR），可以结合 Next.js 使用。

通过这些生态项目的结合，你可以构建出更加复杂和功能丰富的 React 应用。

react-plain-router 🛣 A 2kb React router that works exactly as expected with native Javascript 项目地址: https://gitcode.com/gh_mirrors/re/react-plain-router