Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
atomic-router-forest
Advanced tools
Readme
React bindings for atomic-router
Install the router and forest bingings:
npm i atomic-router atomic-router-forest
Don't forget about peer dependencies, if you haven't installed them yet:
npm i effector forest history
First of all you need to create Link
component to route to from the UI.
In general, you need to create you own internal library router
or something like:
// src/shared/lib/router.ts
import {createLink} from 'atomic-router-forest';
export const Link = createLink();
For each page you need to create a route instance:
// src/shared/routes.ts
import {createRoute} from 'atomic-router';
export const home = createRoute();
export const postsList = createRoute();
export const postView = createRoute<{postId: string}>();
Now you can create each page:
// pages/home/index.ts
import {h, text} from 'forest';
import {withRoute} from 'atomic-router-forest';
import * as routes from '~/shared/routes';
import {Link} from '~/shared/lib/router';
export function HomePage() {
h('div', {
classList: ['flex', 'flex-col'],
fn() {
// This allows to show/hide route if page is matched
// It is required to call `withRoute` inside `h` call
withRoute(routes.home);
text`Hello from the home page`;
Link(router.postList, {
text: `Show posts list`,
});
},
});
}
And the same for the other pages. You can pass params
and query
into the Link
:
Link(routes.postView, {
params: {postId: remap($post, 'id')},
text: remap($post, 'title'),
});
// or
Link(routes.postList, {
query: {offset: $currentOffset.map((offset) => offset + 10)},
text: 'Show next posts',
});
Next step you need to define your paths for each route:
// src/pages/index.ts
// ~ stands for root alias
import * as routes from '~/shared/routes';
import {HomePage} from './home';
import {PostListPage} from './post-list';
import {PostViewPage} from './post-view';
export const routes = [
{path: '/', route: routes.home},
{path: '/posts', route: routes.postsList},
// be sure your postId parameter matches generic parameter in `createRoute`
{path: '/posts/:postId', route: routes.postView},
];
export function Pages() {
HomePage();
PostListPage();
PostViewPage();
}
Last step is create router and link it with the Link and App:
// src/app.ts
import {sample, createEvent} from 'effector';
import {h, node, using} from 'forest';
import {createBrowserHistory} from 'history';
import {createHistoryRouter} from 'atomic-router';
import {linkRouter, onAppMount} from 'atomic-router-forest';
import {routes, Pages} from '~/pages';
import {Link} from '~/shared/lib/router';
// Create history instance and router instance to control routing in the app
const history = createBrowserHistory();
const router = createHistoryRouter({routes});
// This event need to setup initial configuration. You can move it into src/shared
const appMounted = createEvent();
// Attach history for the router on the app start
sample({
clock: appMounted,
fn: () => history,
target: router.setHistory,
});
// Add router into the Link instance to easily resolve routes paths
linkRouter({
clock: appMounted,
router,
Link,
});
function Application() {
Pages();
onAppMount(appMounted);
}
using(document.querySelector('#root')!, Application);
That's all!
SSR guide will be there asap.
FAQs
React bindings for [atomic-router](https://github.com/kelin2025/atomic-router)
The npm package atomic-router-forest receives a total of 12 weekly downloads. As such, atomic-router-forest popularity was classified as not popular.
We found that atomic-router-forest demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.