@atomic-router/react

Atomic-router-react

React bindings for atomic-router

Example on StackBlitz

Installation

Install core and react bindings:

npm i atomic-router atomic-router-react

Don't forget about peer dependencies, if you haven't installed them yet:

npm i effector effector-react react

Usage

RouterProvider - provides router instance

Wrap your app into this:

import { createHistoryRouter } from 'atomic-router'
import { RouterProvider, Route } from 'atomic-router-react'

import { HomePage } from './routes'

const router = createHistoryRouter({ routes });

const App = () => {
  return (
    <RouterProvider router={router}>
      <Route route={homeRoute} view={HomePage} />
    </RouterProvider>
  );
};

Link - render a link

Simple usage:

import { createRoute } from 'atomic-router'
import { Link } from 'atomic-router-react'

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

<Link to={homeRoute}>Route link</Link>
<Link to={postRoute} params={{ postId:1 }}>Route link with params</Link>
<Link to="https://example.com">External link</Link>

All params:

import { Link } from 'atomic-router-react'

<Link
  to={route}
  params={{ foo: 'bar' }}
  query={{ bar: 'baz' }}
  activeClassName="font-semibold text-red-400"
  inactiveClassName="opacity-80"
/>

Route - render route

import { Route } from 'atomic-router-react'

<Route route={homeRoute} view={HomePage} />

useLink — resolve path from route

import { useLink } from 'atomic-router-react'
import { createRoute } from 'atomic-router'

// example path: /some/route/:someId
const someRoute = createRoute<{ someId: number }>()

function SomeComponent() {
  const path = useLink(someRoute, { someId: 1 })
  // -> /some/route/1
}

Be sure, route is passed into routes for createHistoryRoutes. Else hook will throw [useLink] Route not found.