跳到主要内容

React Router 路由模式

声明式路由怎样接入应用？​

  • 适用范围: 以下讨论 react-router 的声明式组件路由，数据加载与框架模式有额外能力，不能混用不同模式的接口假设;
  • 入口包: 使用与项目版本匹配的 react-router，先创建一个 Router 上下文，再在内部使用 Route、Link 和路由 Hook;
npm install react-router

BrowserRouter 怎样把页面位置映射到 URL？​

  • History 模式: 使用浏览器路径和 History API，导航可在不整页刷新的情况下更新位置;
  • 部署条件: 服务器需要让应用路径回退到入口 HTML，否则直接打开或刷新子路径可能返回 404;
import { BrowserRouter } from "react-router";

const app = (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

无法配置服务器路径回退时如何选择？​

  • HashRouter: 把应用路径放在 URL 的 hash 中，hash 不会随普通 HTTP 请求路径发给服务器，因此不需要逐条配置服务端路由回退;
  • 取舍: URL 形式、外部链接与服务端可见性不同，应按部署约束选择，不能简单认定 hash 一定不能用于产品;

测试中如何独立控制导航历史？​

  • MemoryRouter: 在内存维护历史栈，可通过 initialEntries 和 initialIndex 设置起点，适合测试或没有浏览器地址栏的环境;
  • 隔离作用: 不修改真实浏览器 URL，便于为某个路由直接构建测试状态;
import { MemoryRouter } from "react-router";

const testView = (
  <MemoryRouter initialEntries={["/users/1"]}>
    <App />
  </MemoryRouter>
);

服务端如何按指定位置渲染路由？​

  • StaticRouter: 接收请求 location 渲染匹配结果，不执行客户端式有状态导航;
  • 模式区别: 带 loader/action 的服务端数据路由需要相应的数据路由集成，不能只包一个 StaticRouter 就假定数据已加载;