• 简体中文

      • 组件

      简介

      @esmx/router-react 为 React 应用提供了与 @esmx/router 集成的导航和路由渲染组件。本页文档介绍了 RouterLink 和 RouterView 的使用方法。

      导航链接组件，渲染带有适当导航行为和活跃状态管理的锚元素。等同于 @esmx/router-vue 中的 RouterLink。

      Props：

      属性类型默认值描述
      toRouteLocationInput必填目标路由位置（字符串或对象）
      typeRouterLinkType'push'导航类型
      replaceboolean—已弃用 — 请使用 type='replace'
      exactRouteMatchType'include'活跃状态匹配策略
      activeClassstring—活跃状态的自定义 CSS 类
      eventstring | string[]'click'触发导航的事件
      tagstring'a'要渲染的 HTML 标签
      layerOptionsRouteLayerOptions—type='pushLayer' 时的层选项
      beforeNavigateFunction—导航前的钩子
      classNamestring—额外 CSS 类
      styleCSSProperties—内联样式
      childrenReactNode—链接内容

      用法

      import { RouterLink } from '@esmx/router-react';

// 基础用法
<RouterLink to="/about">关于</RouterLink>

// 替换当前历史记录
<RouterLink to="/login" type="replace">登录</RouterLink>

// 在新窗口打开
<RouterLink to="/external" type="pushWindow">外部链接</RouterLink>

// 自定义标签和样式
<RouterLink to="/submit" tag="button" className="btn" style={{ color: 'red' }}>
    提交
</RouterLink>

// 层导航
<RouterLink to="/dialog" type="pushLayer" layerOptions={{ keepAlive: 'include' }}>
    打开弹层
</RouterLink>

      RouterView

      在当前嵌套深度渲染匹配的路由组件。通过 React context 支持嵌套路由和自动深度跟踪。等同于 @esmx/router-vue 中的 RouterView。

      实现

      import { createContext, useContext } from 'react';
import { useRoute } from './router-context';

// 嵌套 RouterView 的深度上下文
const DepthContext = createContext(0);

export function useRouterViewDepth(): number {
    return useContext(DepthContext);
}

export function RouterView() {
    const route = useRoute();
    const depth = useContext(DepthContext);

    const matched = route.matched[depth];
    if (!matched) return null;

    const Component = matched.component as React.ComponentType;

    return (
        <DepthContext.Provider value={depth + 1}>
            <Component />
        </DepthContext.Provider>
    );
}

      用法

      // 根布局
function App({ router }: { router: Router }) {
    return (
        <RouterProvider router={router}>
            <RouterView />
        </RouterProvider>
    );
}

// 父级布局 — 嵌套的 RouterView 渲染子路由
function MainLayout() {
    return (
        <div>
            <nav>
                <RouterLink to="/">首页</RouterLink>
                <RouterLink to="/about">关于</RouterLink>
            </nav>
            <main>
                <RouterView />
            </main>
        </div>
    );
}