React-Router-SSR

Simple isomorphic React SSR for Meteor with subscribed data re-hydration

Supporting the project

This project is published under the communitypackages namespace in hopes that it can become maintained through community effort. For now though it is maintained solely by me (@copleykj) and any support you give helps to fund the development and maintenance of almost 2 dozen Packages for Meteor or for use alongside Meteor.

Patreon / Paypal

Install

First install NPM dependencies

$ npm install --save react react-dom react-router react-helmet history

Then install communitypackages:react-router-ssr

$ meteor add communitypackages:react-router-ssr

Package Exports

renderWithSSR(rootComponent, [options]) - Isomorphic app rendering.

• rootComponent - The component that encompasses your application. Can be any React element. Routers and Switches are handled by the package so those aren't necessary inside your app.

• options - An object of rendering options. Currently there is only a single options, but there may be more options in the future.

  • store - A redux store. If a store is provided as this option, this package will wrap the Router in a Provider component and pass it the store.

1import { renderWithSSR } from 'meteor/communitypackages:react-router-ssr';

browserHistory - This is the history object in the router on the client. The team behind React Router, in all their infinite wisdom, decided to remove access to this in v4 and require you to pass history through props like a f#@%ing hot potato. This allows you to import the history object in a sane manor and use it in the way you have come to know and love :heart:. Enjoy!

Usage

In shared code, such as in a /both/main.jsx file, or in a file that is imported into your mainModule for both the client and server..

1import { renderWithSSR } from 'meteor/communitypackages:react-router-ssr';
2import { withTracker } from 'meteor/react-meteor-data';
3
4
5import React, { Fragment } from 'react';
6import { Route } from 'react-router-dom';
7
8import DashboardPage from './imports/ui/pages/dashbaord';
9import ProfilePage from './imports/ui/pages/profile';
10import LoginPage from './imports/ui/pages/login';
11
12
13export default App = ({ user }) => {
14  if (user) {
15    return (
16      <Fragment>
17        <Route path="/" component={DashboardPage} />
18        <Route path="/profile/:username" component={ProfilePage} />
19      <Fragment/>
20    );
21  }
22
23  return (<LoginPage />);
24};
25
26const AppContainer = withTracker(() => ({
27    user: Meteor.user(),
28}))(App);
29
30
31
32renderWithSSR(AppContainer);