LogoLogo
GithubTwitterDiscordPlayground
English
English
  • 👋Atomico
  • 🚀Getting started with Atomico
  • ⚛️Getting started with Atomico for React users
  • 💡What can you do with Atomico?
    • You can create amazing webcomponents
    • You can create design systems
    • You can create websites
    • You can create mobile applications
    • You can create web applications
  • API
    • 🧬Props(Properties)
      • Value cycle as prop
      • Is it advisable to declare events using the props API?
    • 🧩VirtualDOM
      • Advanced
    • 🎣Hooks
      • useProp
      • useEvent
      • useRef
      • useHost
      • useState
      • useReducer
      • useEffect, useLayoutEffect and useInsertionEffect
      • useMemo and useCallback
      • useUpdate
      • useId
      • useContext
        • useProvider
      • usePromise
      • useAsync and useSuspense
      • useAbortController
    • 🔬Testing
      • Render cycle
      • atomico/test-hooks
      • atomico/test-dom
  • Guides
    • 🤔Frequent questions
      • Is it advisable to declare events using the props API?
      • How to declare events for your component at the type level for TSX?
      • When and why to use shadowDom?
      • Can I use Atomico in browsers without ESM support?
    • 🤩Component
      • Naming
      • CSS Styles with Shadow DOM
    • 🛡️Atomico with Typescript
      • Props
      • Component
      • Meta-types
        • Type
        • Event declaration
        • Method declaration
      • Check the correct use of hooks
    • 🤝Atomico and React
      • Integrating Atomico in React
      • From React to Atomico
        • Rendering Differences
        • VirtualDOM api differences
    • ⏳Atomico and Asynchrony
    • 🧠Atomico design patterns
      • ♻️Webcomponents with hybrid rendering
      • 🔗Slot as templates
      • 🔀Slot
    • 📖Atomico and Storybook
      • Frequent questions
    • 💧SSR / SSG
    • 🗃️Archives
      • Class inheritance
      • Forms and shadowDOM
      • Tips
      • Design systems
      • Atomico style guide
        • File structure
          • Monorepo
          • Design systems
  • packages
    • @atomico/hooks
      • useCurrentValue
      • use-intersection-observer
      • use-ref-values
      • use-script
      • use-attributes
      • use-prop-proxy
      • use-click-press
      • use-dollars
      • use-reflect-event
      • use-keyboar
      • use-click-coordinates
      • use-copy
      • use-debounce-state
      • use-form
      • use-listener
      • use-disabled
      • use-css
      • use-channel
      • use-promise
      • use-responsive-state
      • use-parent
      • use-resize-observer
      • use-slot
        • useSlot
        • useProxySlot
      • use-render
      • use-mutation-observer
      • use-css-light-dom
      • use-controller
      • use-router
      • use-async-effect
      • use-child-nodes
      • use-force-render
    • @atomico/store
      • Store
    • @atomico/storybook
    • @atomico/router
    • @atomico/vite
      • ⚙️Process CSS tag template blocks with PostCSS.
      • 🏗️Compile your code to be distributed optimally as a package.
      • 📕Use the JSX/TSX syntax of Atomico when using Storybook.
      • 🤖Automatically create customElements.define
      • ☑️Support for Vitest for Atomico.
      • 🧙‍♂️Server actions
    • @atomico/exports
      • 🚩CLI and Flags
      • 🤖Wrapper for React
    • @atomico/components
      • @atomico/keen-slider
      • @atomico/modal
      • @atomico/lottie
      • @atomico/table
    • @atomico/react
    • @atomico/postcss-tokens
      • Example with @atomico/vite
    • @atomico/wrapper
    • 🚫Deprecated
      • @atomico/magic-form
        • MagicFormProvider | <magic-form-provider>
        • MagicForm | <magic-form>
        • MagicForm Hooks
        • MagicForm in React and Preact
        • MagicForm in Microfrontend
        • MagicForm Patterns
      • @atomico/design-tokens
        • @atomico/design-tokens api
  • Support
    • Discord
    • Github
    • Twitter
Powered by GitBook
On this page
  • Syntax
  • Elements
  • RouterSwitch
  • RouterCase
  • Examples
  • Pokeapi

Was this helpful?

Edit on GitHub
Export as PDF
  1. packages

@atomico/router

powerful router for Webcomponents, React and Preact

Previous@atomico/storybookNext@atomico/vite

Last updated 2 years ago

Was this helpful?

@atomico/router aims to facilitate the creation of SPA-type applications through the following strategies:

  1. slot: you can reference a slot within the Router Switch to show on a specific path.

  2. elements: you will be able to mount CustomElements through Instantable elements.

  3. asynchronous generators: through asynchronous generators you will be able to show multiple views according to the load state, for example transitions.

Syntax

import { render } from "atomico";
import { RouterSwitch, RouterCase } from "@atomico/router";

render(
    <RouterSwitch>
        <RouterCase path="/" for="home"></RouterCase>
        <RouterCase path="/user/{id}" load={async function *()({id}){
            yield <h1>loading...</h1>;
            const data = await getUser(id);
            return <User {...data}/>
        }}></RouterCase>
        <h1 slot="config">home</h1>
    </RouterSwitch>,
    document.body
)
<router-switch>
    <router-case path="/" for="home"></router-case>
    <router-case path="/config" for="config"></router-case>
    <section slot="home">...</section>
    <section slot="config">...</section>
</router-switch>

Elements

RouterSwitch

Properties

Props
Description
Type
Event

case

slot to associate at the time of the match with path

String - read only

match

Events

Event
JSX

Match

onMatch

It is dispatched every time the router matches a new route.

RouterCase

Component that declares the behavior of the route, with it you can:

  1. Define a slot to show instantly when matching the browser path.

  2. Define a load callback to execute when matching the browser route.

Properties

Props
Description
Type

load

asynchronous content loader

Function

for

slot to associate at the time of the match with path

String

path

expression for path

String

memo

memorize the state resolved by load according to the concurrent path

Boolean

destroy

Remove associated view on route change

Boolean

Examples

Pokeapi

GitHub - atomicojs/routerGitHub
Logo