communitypackages:react-router-ssr

v2.0.1Published 3 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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.

Litecoin

Patreon / Paypal

Install

First install NPM dependencies

$ npm install --save react react-dom react-router react-router-dom 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.

    • storeOptions - An object that contains the options for a redux store.

      • rootReducer - Your apps root reducer.
      • initialState - The initial state.
      • middlewares - An array of middlewares to apply.
1import { renderWithSSR } from "meteor/communitypackages:react-router-ssr";
2
3import thunk from "redux-thunk";
4import { createLogger } from "redux-logger";
5
6import rootReducer from "./reducers/root";
7
8const logger = createLogger({ diff: true });
9
10renderWithSSR(<App />, {
11  storeOptions: {
12    rootReducer,
13    initialState: { counter: 100 },
14    middlewares: [thunk, logger]
15  }
16});

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!

1import { browserHistory } from "meteor/communitypackages:react-router-ssr";
2
3browserHistory.replace("/login");

Usage

This package renders your app into an HTML element with an id of react-app, so add one to your main HTML file for your project like so.

1<head>
2  <meta charset="UTF-8" />
3  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
5</head>
6<body>
7  <div id="react-app"></div>
8</body>

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
4import React from "react";
5import { Route } from "react-router-dom";
6
7import DashboardPage from "./imports/ui/pages/dashbaord";
8import ProfilePage from "./imports/ui/pages/profile";
9import LoginPage from "./imports/ui/pages/login";
10
11const App = ({ user }) => {
12  if (user) {
13    return (
14      <>
15        <Route exact path="/" component={DashboardPage} />
16        <Route path="/profile/:username" component={ProfilePage} />
17      </>
18    );
19  }
20
21  return <LoginPage />;
22};
23
24const AppContainer = withTracker(() => ({
25  user: Meteor.user()
26}))(App);
27
28renderWithSSR(<AppContainer />);

Styled Components

If the styled-components package is installed in your project, this package will detect it's presence, create a new ServerStyleSheet, collect all styles, and use them to render your app.