docs: Docs for createRouteView & createRoutesView

Author: Kelin2025

README.md

@@ -25,10 +25,10 @@ npm i effector effector-react react
 Wrap your app into this:
 
 ```tsx
-import { createHistoryRouter } from 'atomic-router'
-import { RouterProvider, Route } from 'atomic-router-react'
+import { createHistoryRouter } from "atomic-router";
+import { RouterProvider, Route } from "atomic-router-react";
 
-import { HomePage } from './routes'
+import { HomePage } from "./routes";
 
 const router = createHistoryRouter({ routes });
 
@@ -49,7 +49,7 @@ Simple usage:
 import { createRoute } from 'atomic-router'
 import { Link } from 'atomic-router-react'
 
-const homeRoute = createRoute<{postId:string}>()
+const homeRoute = createRoute()
 const postRoute = createRoute<{postId:string}>()
 
 <Link to={homeRoute}>Route link</Link>
@@ -60,21 +60,96 @@ const postRoute = createRoute<{postId:string}>()
 All params:
 
 ```tsx
-import { Link } from 'atomic-router-react'
+import { Link } from "atomic-router-react";
 
 <Link
   to={route}
-  params={{ foo: 'bar' }}
-  query={{ bar: 'baz' }}
+  params={{ foo: "bar" }}
+  query={{ bar: "baz" }}
   activeClassName="font-semibold text-red-400"
   inactiveClassName="opacity-80"
-/>
+/>;
+```
+
+### `createRoutesView` - render routes
+
+```tsx
+import { createRouteView, RouterProvider } from "atomic-router-react";
+
+// { route: RouteInstance<...>, view: FC<...> }
+import * as Home from "@/pages/home";
+import * as Post from "@/pages/post";
+
+import { router } from "@/app/routing";
+
+const RoutesView = createRoutesView({
+  routes: [
+    { route: Home.route, view: Home.Page },
+    { route: Post.route, view: Post.Page },
+  ],
+  otherwise: () => {
+    return <div>Page not found!</div>;
+  },
+});
+
+const App = () => {
+  return (
+    <RouterProvider router={router}>
+      <RoutesView />
+    </RouterProvider>
+  );
+};
 ```
 
+You can also set only a part of `createRoutesView` config on create and pass the rest of it via props:
+
+```tsx
+// Set specific otherwise view
+const RoutesView = createRoutesView({
+  otherwise: SpecificNotFound,
+});
+
+// Pass the routes as a prop
+<RoutesView routes={routes} />;
+```
+
+### `createRouteView` - render view if route is opened
+
+```tsx
+import { createRoute } from "atomic-router";
+import { createRouteView } from "atomic-router-react";
+import { restore, createEffect } from "effector";
+
+const homeRoute = createRoute();
+
+const getPostsFx = createEffect(/* ... */);
+
+const $posts = restore(getPostsFx, []);
+
+const postsLoadedRoute = chainRoute({
+  route,
+  beforeOpen: getPostsFx,
+});
+
+const PostsList = createRouteView({
+  route: postsLoadedRoute,
+  view: () => {
+    const posts = useStore($posts);
+
+    return; /* ... */
+  },
+  otherwise: () => {
+    return <div>Loading...</div>;
+  },
+});
+```
+
+Like in `createRoutesView`, you can set only a part of `createRouteView` config on create and pass the rest of it via props.
+
 ### `Route` - render route
 
 ```tsx
-import { Route } from 'atomic-router-react'
+import { Route } from "atomic-router-react";
 
-<Route route={homeRoute} view={HomePage} />
+<Route route={homeRoute} view={HomePage} />;
 ```