https://github.com/doasync/trace-router-react
React bindings for `trace-router`
https://github.com/doasync/trace-router-react
Last synced: 11 months ago
JSON representation
React bindings for `trace-router`
- Host: GitHub
- URL: https://github.com/doasync/trace-router-react
- Owner: doasync
- License: mit
- Created: 2020-09-01T01:12:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T21:04:48.000Z (about 3 years ago)
- Last Synced: 2025-03-29T13:45:54.281Z (12 months ago)
- Language: TypeScript
- Size: 1.18 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Trace Router React
React bindings for `trace-router` - the next generation router
### Installation
```
yarn add effector trace-router trace-router-react
```
### Exports
```ts
export { useRoute, Route, Link } from './react';
````
### Examples
Use routes:
```jsx
export const Root = () => (
<>
{useRoute(user) && }
{useRoute(info) && }
{useStore(router.noMatches) && }
>
);
```
You can use `Route` instead of a hook:
```jsx
export const UserPage = () => (
);
```
Or use children of `Route`:
```jsx
export const InfoPage = () => (
);
```
Use links:
```jsx
About
````
Use can compile links with params:
```jsx
Month
````
The above link compiles to something like:
```jsx
Join Us
````
### Types
Link
```ts
type LinkProps
= {
to: RouteType
;
children: ReactNode;
params?: P;
query?: string[][] | Record | string | URLSearchParams;
hash?: string;
compileOptions?: ParseOptions & TokensToFunctionOptions;
} & DetailedHTMLProps<
AnchorHTMLAttributes,
HTMLAnchorElement
>;
```
Route
```ts
type RouteProps = {
of: RouteType;
children?: ReactNode;
component?: ComponentType;
};
```
### Implementation
Hook:
```ts
export const useRoute = route => useStore(route.visible);
````
Route component:
```tsx
export const Route = ({
of: route,
component: Component,
children,
}: RouteProps): JSX.Element => {
const element = children ?? (Component && );
return <>{useStore(route.visible) && element}>;
};
````
Link implementation is more advanced...
### Docs
See the source code ;)