@before/client

yarn add @before/client
yarn add @loadable/component react react-dom react-router-dom

Basic usage

// ./src/routes.js
import { asyncComponent } from '@before/client';
import loadable from '@loadable/component';

const Placeholder = () => <div>Loading</div>;

const HomeContainerLoader = /* #__LOADABLE__ */ () =>
  import(/* webpackChunkName: "home" */ './pages/HomeContainer/HomeContainer.page');

const routes = [
  {
    path: '/',
    exact: true,
    component: asyncComponent({
      LoadableComponent: loadable(HomeContainerLoader, { fallback: Placeholder }),
      loader: HomeContainerLoader
    })
  }
];

export default routes;

// ./src/client.js
import React from 'react';
import routes from './routes';
import { hydrate } from 'react-dom';
import { ensureReady, ensureClientReady, Before } from '@before/client';

ensureClientReady(() =>
  ensureReady(routes)
    .then(data => {
      hydrate(
        <BrowserRouter>
          <Before data={data} routes={routes} />
        </BrowserRouter>,
        document.getElementById('root')
      );
    })
  }
);

// ./pages/HomeContainer/HomeContainer.page'
import React, { useCallback } from 'react';

function HomePage({ history, location }) {
  const handleClick = useCallback(() => {
    history.push('/search/page');
  }, [history]);

  return (
    <main>
      <header>
        <h1>Home Page</h1>
      </header>
      <article>
        <section>
          <p>Hello actual pathname is {location.pathname}</p>
        </section>
        <a href="" onClick={handleClick}>Go to next page</a>
      </article>
    </main>
  );
}

Page props

Before will pass down the following props to your component plus all your component initial props:

| Name | Description | |--|--| | history | Copy of react-router history but with custom push, replace and location properties. The original properties can we access with the unstable_ prefix. | | query | Object with the querystring value from the location object if we are in the client or from the request query if we are in the server. | | match | A match object contains information about how a matched the URL. More info | | location | A location object shaped like { pathname, search, hash, state } |