Atomic Router

Appearance

Return to top
On this page

Getting Started

Installation

bash
npm install effector atomic-router history

View-library bindings

Initialization

Create your routes wherever you want:

ts
// @/pages/home
import { createRoute } from 'atomic-router';

export const homeRoute = createRoute();

// @/pages/post
import { createRoute } from 'atomic-router';

export const postRoute = createRoute<{ postId: string }>();

And then create a router

ts
// @/app/routing
import { createHistoryRouter } from 'atomic-router';
import { createBrowserHistory, createMemoryHistory } from 'history';

import { homeRoute } from '@/pages/home';
import { postRoute } from '@/pages/post';

// 1. Define routes
const routes = [
  { path: '/', route: homeRoute },
  { path: '/posts/:postId', route: postRoute },
];

// 2. Create router
const router = createHistoryRouter({
  routes: routes,
});

// 3. Create history
const history = isSsr ? createMemoryHistory() : createBrowserHistory();

// 4. Attach it to router
router.setHistory(history);

fork support

In order to work with fork, you need to add this to your .babelrc:

json
{
  "presets": ["atomic-router/babel-preset"]
}

SWC support

Before continue you need to install @effector/swc-plugin.

Next you need to add "atomic-router" into factories array:

json
// .swcrc
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        "@effector/swc-plugin",
        {
          "factories": ["atomic-router"]
        }
      ]
    }
  }
}