Hello actual pathname is {location.pathname}
Go to next page
Enables data fetching with any React SSR app that uses React Router 5




``sh`
yarn add @before/client
yarn add @loadable/component react react-dom react-router-dom
`js
// ./src/routes.js
import { asyncComponent } from '@before/client';
import loadable from '@loadable/component';
const Placeholder = () =>
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;
`
`jsx
// ./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(
document.getElementById('root')
);
})
}
);
`
`jsx
// ./pages/HomeContainer/HomeContainer.page'
import React, { useCallback } from 'react';
function HomePage({ history, location }) {
const handleClick = useCallback(() => {
history.push('/search/page');
}, [history]);
return ( Hello actual pathname is {location.pathname}
Home Page
Go to next page
);
}
`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. |location
| query | Object with the querystring value from the object if we are in the client or from the _request query_ if we are in the server. |{ pathname, search, hash, state }` |
| match | A match object contains information about how a
| location | A location object shaped like