open-index/open-npm huggingface dataset:
npm package: @iamok/react-async-routes
Description: This package aims to provide support for async routes resolving for React Router v4. Use async function to provide declarative router routes.
Latest version: 1.1.0

# React Async Router
This package aims to provide support for async routes resolving for React Router v4.
Use async function to provide declarative router routes.

Async routes resolving can be helpful if routes declaration is unknown during
compilation and can only be resolved during runtime.


## Install 
npm install @iamok/react-router-async-routes --save

or

yarn add @iamok/react-router-async-routes


## Usage

#### Client side
To use async routes on Client Side wrap `<BrowserRouter>` into `<AsyncRoutesResolver>` component

```js
import { AsyncRoutesResolver } from '@iamok/react-async-routes';

const asyncRoutes = () => Promise.resolve([
    {
        component: App,
        routes: [
          {
              path: '/',
              exact: true,
              component: Page,
          }
        ]
    }
]);

ReactDOM.render(
    <AsyncRoutesResolver routes={asyncRoutes}>
        <BrowserRouter>
            <Router />
        </BrowserRouter>
    </AsyncRoutesResolver>,
    document.getElementById('app') as HTMLElement
);
```

`AsyncRoutesResolver` will provide context with resolved routes declarations
that can be later used for `<Router>` component.

```js
import { withAsyncRoutes } from '@iamok/react-async-routes';

class Router extends React.PureComponent {
    static contextType = AsyncRoutesResolverContext;

    render() {
        return <Switch>
            <Route
                path="/"
                render={({
                    match,
                    location,
                }: RouteConfigComponentProps<{}>) => {
                    const renderer = () =>
                        renderRoutes(
                             this.context,
                            { match, history: this.props.history },
                            { location }
                    );

                    return renderer();
                }}
            />
        </Switch>;
    }
}

export default withAsyncRoutes(withRouter(Router));
```

#### Server side
In order to use async routes in SSR async routes must be resolved before `ReactDOMServer.renderToString`
is executed.

```js
import { resolveAsyncRoutes, AsyncRoutesResolver } from '@iamok/react-async-routes';

const routes = await resolveAsyncRoutes(req.url, asyncRoutes);

ReactDOMServer.renderToString(
  <AsyncRoutesResolver routes={routes}>
    <StaticRouter location={req.url}>
      <Router />
    </StaticRouter>
  </AsyncRoutesResolver>
);
```
npm package: @iamok/react-router-data
Description: Static router data resolver. It allows to prefetch data based on declarative configured routes.
Latest version: 1.1.0

# React Router Data
Static router data resolver. It allows to prefetch data based on declarative
configured routes.


## Install 
```bash
npm install @iamok/react-router-data --save
```

or

```bash
yarn add @iamok/react-router-data
```


## Usage

Router configuration is the same configuration used in [`react-router-config`](https://github.com/remix-run/react-router/tree/main/packages/react-router-config).
Configuration uses extra `data` property which serves as a data resolver - specific
for each route. This data resolver can serve preloaded data or preconfigure
seo data for SSR.

#### Server side
Use `react-router-data` on SSR to preload SEO data.
```js
import { resolveRouterData } from '@iamok/react-router-data';


const dataRoutes = [
    {
        routes: [
            {
                path: '/page-1',
                exact: true,
                data: () => ({
                    metaTitle: 'Title for page 1',
                    metaDescription: 'Description for page 1'
                })
            },
            {
                path: '/page-2',
                exact: true,
                data: () => ({
                    metaTitle: 'Title for page 2',
                    metaDescription: 'Description for page 2'
                })
            }
        ]
    }
];

          
app.get('*', async (req, res, next) => {
  const seo = await resolveRouterData(req.url, dataRoutes);
  const html = ReactDOMServer.renderToString(
              <PageSeo title=={seo.metaTitle} description={seo.metaDescription}>
                <Router />
              </PageSeo>));
              
  res.send(`<!doctype html>${html}`);
});          
```

Note that `dataRoutes` can be resolved asynchronously. This can be useful if we need generic routes for different components
and those routes can be only determined based on API call.
e.g.: `/:page1` will link to Page1 or Page2 based on API condition