2.9.3

2.9.3 - 2017-10-18
-----------------------------------------------

## Routing
* Adds app-wide `history` instance to `kit/lib/routing.js`, for
controlling routes outside of React directly
* Replaces React Router's `<BrowserRouter>` with `<Router
history={history}>`, to stay in sync with global pushstate

Author: leebenson

CHANGELOG.md

@@ -1,3 +1,10 @@
+2.9.3 - 2017-10-18
+-----------------------------------------------
+
+## Routing
+* Adds app-wide `history` instance to `kit/lib/routing.js`, for controlling routes outside of React directly
+* Replaces React Router's `<BrowserRouter>` with `<Router history={history}>`, to stay in sync with global pushstate
+
 2.9.2 - 2017-10-17
 -----------------------------------------------
 

kit/entry/browser.js

@@ -16,8 +16,10 @@ import 'isomorphic-fetch';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-// Browser routing
-import { BrowserRouter } from 'react-router-dom';
+// React Router, for controlling browser routes.  We'll feed in our custom
+// `history` instance that's imported below, so that we have a single store of
+// truth for routing
+import { Router } from 'react-router-dom';
 
 // Apollo Provider. This HOC will 'wrap' our React component chain
 // and handle injecting data down to any listening component
@@ -31,6 +33,9 @@ import { ApolloProvider } from 'react-apollo';
 // first, since it sets up our app's settings
 import App from 'src/app';
 
+// Get the custom `history` that we'll use to feed down to our `<Router>`
+import { history } from 'kit/lib/routing';
+
 // Grab the shared Apollo Client
 import { browserClient } from 'kit/lib/apollo';
 
@@ -68,9 +73,9 @@ const Root = (() => {
   // can respond to route changes
   const Chain = () => (
     <ApolloProvider store={store} client={client}>
-      <BrowserRouter>
+      <Router history={history}>
         <App />
-      </BrowserRouter>
+      </Router>
     </ApolloProvider>
   );
 

kit/lib/routing.js

@@ -3,13 +3,22 @@
 // ----------------------
 // IMPORTS
 
+/* NPM */
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// Browser history, that we can use to control URL pushstate throughout our
+// entire app
+import createBrowserHistory from 'history/createBrowserHistory';
+
+// React Router
 import { Route, Redirect as ReactRouterRedirect } from 'react-router-dom';
 
 // ----------------------
 
+// Create and export a custom history
+export const history = !SERVER && createBrowserHistory();
+
 // <Status code="xxx"> component.  Updates the context router's context, which
 // can be used by the server handler to respond to the status on the server.
 class Status extends React.PureComponent {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactql-app",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "description": "ReactQL starter kit app",
   "license": "UNLICENSED",
   "private": true,
@@ -87,6 +87,7 @@
     "boxen": "^1.2.1",
     "chalk": "^2.1.0",
     "graphql": "^0.11.7",
+    "history": "^4.7.2",
     "ip": "^1.1.5",
     "isomorphic-fetch": "^2.2.1",
     "kcors": "^2.2.1",

src/components/main/index.js

@@ -40,8 +40,9 @@ import Helmet from 'react-helmet';
 
 /* ReactQL */
 
-// NotFound 404 handler for unknown routes
-import { Redirect } from 'kit/lib/routing';
+// NotFound 404 handler for unknown routes, and the app-wide `history` object
+// we can use to make route changes from anywhere
+import { Redirect, history } from 'kit/lib/routing';
 
 /* App */
 
@@ -63,6 +64,13 @@ import logo from './reactql-logo.svg';
 
 // ----------------------
 
+// Example function to show that the `history` object can be changed from
+// anywhere, simply by importing it-- use this in Redux actions, functions,
+// React `onClick` events, etc.
+function changeRoute() {
+  history.push('/page/about');
+}
+
 export default () => (
   <div>
     <Helmet>
@@ -82,6 +90,7 @@ export default () => (
       <li><Link to="/page/contact">Contact</Link></li>
       <li><Link to="/old/path">Redirect from /old/path &#8594; /new/path</Link></li>
     </ul>
+    Change routes anywhere &mdash; <button onClick={changeRoute}>Like here (About)</button>
     <hr />
     <Switch>
       <Route exact path="/" component={Home} />