Atomic-router-react
React bindings for atomic-router
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
.