RouteView

Renders UI for a specific route when it is opened.

RouteView supports three rendering modes:

• through view component;
• through children (static node or render function).

Example

import { RouteView, RouteViewProps } from 'mobx-route/react';
import { routes } from '@/shared/config/routing';

interface FeedPageProps extends RouteViewProps<typeof routes.feed> {}

const FeedPage = ({ params }: FeedPageProps) => {
  const { feedName } = params

  return (
    <div>
      Feed {feedName}
    </div>
  )
}

function Routing() {
  return (
    <>
      <RouteView route={routes.feed} view={FeedPage} />
      <RouteView route={routes.users} view={UsersPage} />
      <RouteView route={routes.userDetails}>
        {(params, route) => (
          <div>{params.userId}</div>
        )}
      </RouteView>
    </>
  );
}

Props

route

Route entity (Route or VirtualRoute) to observe.

• When route.isOpened === true, RouteView renders view or children.
• When route.isOpened === false, RouteView renders fallback (or null if fallback is not provided).

view

React component to render for opened route.

<RouteView route={routes.feed} view={FeedPage} />

The component receives:

• params (typed from the route declaration);
• children (if passed to RouteView).

fallback

Rendered when route is not opened:

<RouteView route={routes.feed} view={FeedPage} fallback={<NotFound />} />

children

Two modes are supported:

1. Static node:

<RouteView route={routes.feed}>
  <div>Feed page</div>
</RouteView>

2. Render function:

<RouteView route={routes.userDetails}>
  {(params, route) => <div>{params.userId}</div>}
</RouteView>

When route is not provided, children is always rendered, and function form is called without arguments.