Source: https://app-studio-6167b.web.app/docs/Router

@app-studio/components

# Router

Render a route from the shared history store. Navigate between screens and optionally synchronize the browser address bar.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.tsx)

## Import

```ts
import { Router } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Text, Vertical, Horizontal, View } from 'app-studio';
import { Button, Router, useHistory } from '@app-studio/components';

const Home = () => {
  const { push } = useHistory();
  return (
    <Vertical gap={12} padding={16}>
      <Text fontWeight="bold">Home</Text>
      <Button onClick={() => push('/profile/42')}>Go to profile 42</Button>
    </Vertical>
  );
};

const Profile = ({ id }: { id?: string }) => {
  const { back, canGoBack } = useHistory();
  return (
    <Vertical gap={12} padding={16}>
      <Text fontWeight="bold">Profile #{id}</Text>
      <Button variant="outline" isDisabled={!canGoBack} onClick={() => back()}>
        Back
      </Button>
    </Vertical>
  );
};

/**
 * A tiny two-screen app driven by the shared history store. On native the
 * Android hardware Back button maps to `back()` automatically.
 */
export const DefaultRouter = () => (
  <View
    height={240}
    width="100%"
    maxWidth={360}
    borderRadius={16}
    overflow="hidden"
    borderWidth={1}
    borderStyle="solid"
    borderColor="color-gray-200"
  >
    <Horizontal padding={8} backgroundColor="color-gray-100">
      <Text color="color-gray-500">Mini Router demo</Text>
    </Horizontal>
    <Router
      initialPath="/"
      routes={[
        { path: '/', component: Home },
        { path: '/profile/:id', component: Profile },
      ]}
    />
  </View>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Router**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `routes` Required | `RouteConfig[] \| Record<string, React.ComponentType<any>>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L15) |
| `initialPath` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L17) |
| `notFound` | `React.ComponentType<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L19) |
| `syncBrowserHistory` | `boolean` | `false` | Reflect navigation to the browser URL and honour the browser Back button (web only, default false). Native always honours the hardware Back button.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L24) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.