@@ -20,7 +20,9 @@ npm i effector effector-react react
20
20
21
21
## Usage
22
22
23
- ### ` RouterProvider ` - provides router instance
23
+ ### Component API
24
+
25
+ #### ` RouterProvider ` - provides router instance
24
26
25
27
Wrap your app into this:
26
28
@@ -41,7 +43,7 @@ const App = () => {
41
43
};
42
44
```
43
45
44
- ### ` Link ` - render a link
46
+ #### ` Link ` - render a link
45
47
46
48
Simple usage:
47
49
@@ -71,49 +73,19 @@ import { Link } from "atomic-router-react";
71
73
/>;
72
74
```
73
75
74
- ### ` createRoutesView ` - render routes
76
+ #### ` Route ` - render route
75
77
76
78
``` tsx
77
- import { createRouteView , RouterProvider } from " atomic-router-react" ;
78
-
79
- // { route: RouteInstance<...>, view: FC<...> }
80
- import * as Home from " @/pages/home" ;
81
- import * as Post from " @/pages/post" ;
82
-
83
- import { router } from " @/app/routing" ;
84
-
85
- const RoutesView = createRoutesView ({
86
- routes: [
87
- { route: Home .route , view: Home .Page },
88
- { route: Post .route , view: Post .Page },
89
- ],
90
- otherwise : () => {
91
- return <div >Page not found!</div >;
92
- },
93
- });
79
+ import { Route } from " atomic-router-react" ;
94
80
95
- const App = () => {
96
- return (
97
- <RouterProvider router = { router } >
98
- <RoutesView />
99
- </RouterProvider >
100
- );
101
- };
81
+ <Route route = { homeRoute } view = { HomePage } />;
102
82
```
103
83
104
- You can also set only a part of ` createRoutesView ` config on create and pass the rest of it via props:
84
+ ### Declarative API
105
85
106
- ``` tsx
107
- // Set specific otherwise view
108
- const RoutesView = createRoutesView ({
109
- otherwise: SpecificNotFound ,
110
- });
111
86
112
- // Pass the routes as a prop
113
- <RoutesView routes = { routes } />;
114
- ```
115
87
116
- ### ` createRouteView ` - render view if route is opened
88
+ #### ` createRouteView ` - render view if route is opened
117
89
118
90
``` tsx
119
91
import { createRoute } from " atomic-router" ;
@@ -144,12 +116,46 @@ const PostsList = createRouteView({
144
116
});
145
117
```
146
118
147
- Like in ` createRoutesView ` , you can set only a part of ` createRouteView ` config on create and pass the rest of it via props.
119
+ You can also set only a part of ` createRouteView ` config on create and pass the rest of it via props.
148
120
149
- ### ` Route ` - render route
121
+ #### ` createRoutesView ` - render routes
150
122
151
123
``` tsx
152
- import { Route } from " atomic-router-react" ;
124
+ import { createRouteView , RouterProvider } from " atomic-router-react" ;
153
125
154
- <Route route = { homeRoute } view = { HomePage } />;
126
+ // { route: RouteInstance<...>, view: FC<...> }
127
+ import * as Home from " @/pages/home" ;
128
+ import * as Post from " @/pages/post" ;
129
+
130
+ import { router } from " @/app/routing" ;
131
+
132
+ const RoutesView = createRoutesView ({
133
+ routes: [
134
+ { route: Home .route , view: Home .Page },
135
+ { route: Post .route , view: Post .Page },
136
+ ],
137
+ otherwise : () => {
138
+ return <div >Page not found!</div >;
139
+ },
140
+ });
141
+
142
+ const App = () => {
143
+ return (
144
+ <RouterProvider router = { router } >
145
+ <RoutesView />
146
+ </RouterProvider >
147
+ );
148
+ };
149
+ ```
150
+
151
+ Like in ` createRouteView ` , you can set only a part of ` createRoutesView ` config on create and pass the rest of it via props:
152
+
153
+ ``` tsx
154
+ // Set specific otherwise view
155
+ const RoutesView = createRoutesView ({
156
+ otherwise: SpecificNotFound ,
157
+ });
158
+
159
+ // Pass the routes as a prop
160
+ <RoutesView routes = { routes } />;
155
161
```
0 commit comments