@andideve/extended-route v0.0.1-alpha.1

extended-route

An awesome extended-route with React Router.

Basically this package makes the component load the data before rendering.

Getting started

The extended-route package is distributed using npm, the node package manager.

npm i --save @andideve/extended-route

Import extended-route into your project, define some routes and you're good to go!

import { createRoutes } from '@andideve/extended-route';
import Home from './components/Home';

// define your routes
const routes = createRoutes([
  {
    path: '/',
    exact: true,
    component: Home,
  },
]);

export { routes };

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { routes } from './config/routes';

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      {routes.map((route, i) => (
        <Route {...route} key={i} />
      ))}
    </Switch>
  </BrowserRouter>,
  document.getElementById('root'),
);

Examples

Create a new page

const Home = ({ isLoading, bookmarks }) => {
  if (isLoading) {
    // return something
  }

  return (
    // return something
  );
}

// `getStaticProps` is optionally
Home.getStaticProps = ({ pathname, params }) => {
  return new Promise(async (resolve, reject) => {
    try {
      const bookmarks = await fetcher();
      resolve({ bookmarks });
    } catch(err) {
      reject(err);
    }
  });
}

export default Home;

Using Typescript

import { ExtendedFC } from '@andideve/extended-route';
import { BaseBookmark } from './types'

interface StaticProps {
  bookmarks: BaseBookmark[];
}

const Home: ExtendedFC<StaticProps> = ({ isLoading, bookmarks }) => {
  if (isLoading) {
    // return something
  }

  return (
    // return something
  );
}

Home.getStaticProps = ({ pathname, params }) => {
  return new Promise(async (resolve, reject) => {
    try {
      const bookmarks = await fetcher();
      resolve({ bookmarks });
    } catch(err) {
      reject(err);
    }
  });
}

export default Home;

MIT License