• English

      • Components

      Introduction

      @esmx/router-react provides navigation and route rendering components for React applications integrated with @esmx/router. This page documents the usage of RouterLink and RouterView.

      Navigation link component that renders an anchor element with proper navigation behavior and active state management. Equivalent to RouterLink in @esmx/router-vue.

      Props:

      PropTypeDefaultDescription
      toRouteLocationInputrequiredTarget route location (string or object)
      typeRouterLinkType'push'Navigation type
      replaceboolean—Deprecated — Use type='replace'
      exactRouteMatchType'include'Active state matching strategy
      activeClassstring—Custom CSS class for active state
      eventstring | string[]'click'Event(s) that trigger navigation
      tagstring'a'HTML tag to render
      layerOptionsRouteLayerOptions—Layer options when type='pushLayer'
      beforeNavigateFunction—Hook called before navigation
      classNamestring—Additional CSS class
      styleCSSProperties—Inline styles
      childrenReactNode—Link content

      Usage

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

// Basic usage
<RouterLink to="/about">About</RouterLink>

// Replace current history entry
<RouterLink to="/login" type="replace">Login</RouterLink>

// Open in new window
<RouterLink to="/external" type="pushWindow">External link</RouterLink>

// Custom tag and styles
<RouterLink to="/submit" tag="button" className="btn" style={{ color: 'red' }}>
    Submit
</RouterLink>

// Layer navigation
<RouterLink to="/dialog" type="pushLayer" layerOptions={{ keepAlive: 'include' }}>
    Open dialog
</RouterLink>

      RouterView

      Renders the matched route component at the current nesting depth. Supports nested routing with automatic depth tracking via React context. Equivalent to RouterView in @esmx/router-vue.

      Implementation

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

// Depth context for nested 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>
    );
}

      Usage

      // Root layout
function App({ router }: { router: Router }) {
    return (
        <RouterProvider router={router}>
            <RouterView />
        </RouterProvider>
    );
}

// Parent layout — nested RouterView renders child routes
function MainLayout() {
    return (
        <div>
            <nav>
                <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink>
            </nav>
            <main>
                <RouterView />
            </main>
        </div>
    );
}