Naboo's Podracing Misadventure
    Have ideas to improve npm?Join in the discussion! »

    trace-router-react-ssr
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.3 • Public • Published

    Trace Router React

    React bindings for trace-router - the next generation router

    Installation

    yarn add effector trace-router trace-router-react
    

    Exports

    export { useRoute, Route, Link } from './react';

    Examples

    Use routes:

    export const Root = () => (
      <>
        {useRoute(user) && <UserPage />}
        {useRoute(info) && <InfoPage />}
        {useStore(router.noMatches) && <NotFound />}
      </>
    );

    You can use Route instead of a hook:

    export const UserPage = () => (
      <AppFrame>
        <UserTemplate>
          <Route of={userProfile} component={UserProfile} />
          <Route of={userTickets} component={UserTickets} />
          <Route of={userTicket} component={UserTicket} />
        </UserTemplate>
      </AppFrame>
    );

    Or use children of Route:

    export const InfoPage = () => (
      <AppFrame>
        <InfoTemplate>
          <Route of={joinUs}>
            <JoinUs />
          </Route>
          <Route of={about}>
            <About />
          </Route>
          <Route of={privacy}>
            <Privacy />
          </Route>
        </InfoTemplate>
      </AppFrame>
    );

    Use links:

    <Link to={about}>About</Link>

    Use can compile links with params:

    <Link to={userTicket} params={{ id: 100 }}>Month</Link>

    The above link compiles to something like:

    <a href="/user-tiket/100" onClick={/* prevent default & navigate */}>Join Us</a>

    Types

    Link
      type LinkProps<P extends Params> = {
        to: RouteType<P>;
        children: ReactNode;
        params?: P;
        query?: string[][] | Record<string, string> | string | URLSearchParams;
        hash?: string;
        compileOptions?: ParseOptions & TokensToFunctionOptions;
      } & DetailedHTMLProps<
        AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
      >;
    Route
    type RouteProps = {
      of: RouteType;
      children?: ReactNode;
      component?: ComponentType;
    };

    Implementation

    Hook:

    export const useRoute = route => useStore(route.visible);

    Route component:

    export const Route = ({
      of: route,
      component: Component,
      children,
    }RouteProps)JSX.Element => {
      const element = children ?? (Component && <Component />);
      return <>{useStore(route.visible) && element}</>;
    };

    Link implementation is more advanced...

    Docs

    See the source code ;)

    Install

    npm i trace-router-react-ssr

    DownloadsWeekly Downloads

    0

    Version

    0.9.3

    License

    MIT

    Unpacked Size

    29.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar