From f72bb0b755ee65977c2917d4425ee52d2cf45daf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexander=20M=C3=BCller?= Date: Fri, 9 Feb 2018 00:03:05 +0100 Subject: [PATCH 1/2] Updated README to mention React Router v4 support. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b2abf8c..3e628f9 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ dispatch Redux actions in response to route changes. - [Hash History](#hash-history) - [Browser History](#browser-history) - [Browser History with React](#browser-history-with-react) - - [React Router v2/v3](#react-router) + - [React Router](#react-router) ## Install @@ -336,7 +336,7 @@ export default function App() { ### React Router -Redux Saga Router can also work in tandem with React Router v2 or v3! Instead of +Redux Saga Router can also work in tandem with React Router (v2, v3, and v4)! Instead of using one of Redux Saga Router's history creation functions, just use your history object from React Router. From d5f9c52e03fd58b848ce190fc62660f5335962c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexander=20M=C3=BCller?= Date: Sun, 11 Feb 2018 13:33:35 +0100 Subject: [PATCH 2/2] Updated example setup to work with React Router v2/v3 and v4. --- README.md | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3e628f9..de7375d 100644 --- a/README.md +++ b/README.md @@ -285,12 +285,19 @@ available in React Router. Just pass in your `history` object to the separate file in your application for exporting your `history` object and your `Link` component. +If you are also using React Router, you can use the `Link` component that is shipped with React Router. + ```js // history.js -import { createBrowserHistory } from 'redux-saga-router'; import { createLink } from 'redux-saga-router/react' +// Without React Router v4: +import { createBrowserHistory } from 'redux-saga-router'; + +// With the history npm package: +import createBrowserHistory from 'history/createBrowserHistory'; + const history = createBrowserHistory(); export const Link = createLink(history); @@ -338,14 +345,20 @@ export default function App() { Redux Saga Router can also work in tandem with React Router (v2, v3, and v4)! Instead of using one of Redux Saga Router's history creation functions, just use your -history object from React Router. +history object from React Router (v2, v3) or use the history creation functions provided by the history npm package (v4). ```js // saga.js import { router } from 'redux-saga-router'; + +// React Router v2 and v3: import { browserHistory as history } from 'react-router'; +// React Router v4: +import createBrowserHistory from 'history/createBrowserHistory'; +const history = createBrowserHistory(); + const routes = { // ... }; @@ -388,12 +401,19 @@ import React from 'react'; import { render } from 'react-dom'; import { applyMiddleware, createStore } from 'redux'; import createSagaMiddleware from 'redux-saga'; -import { Router, Route, browserHistory as history } from 'react-router'; import App from './App'; import Users from './Users'; import User from './User'; import mainSaga from './saga'; +// React Router v2 and v3: +import { Router, Route, browserHistory as history } from 'react-router'; + +// React Router v4: +import createBrowserHistory from 'history/createBrowserHistory'; +import { Router, Route } from 'react-router'; +const history = createBrowserHistory(); + function reducer() { return {}; }