",
9 | "license": "MIT",
10 | "devDependencies": {
11 | "babel": "^5.8.23",
12 | "babel-core": "^5.8.23",
13 | "babel-loader": "^5.3.2",
14 | "babel-plugin-react-transform": "^1.0.3",
15 | "babel-runtime": "^5.8.20",
16 | "express": "^4.13.3",
17 | "lodash": "^3.10.1",
18 | "query-string": "^2.4.1",
19 | "react-transform-hmr": "^1.0.1",
20 | "redux": "^2.0.0",
21 | "serialize-javascript": "^1.1.2",
22 | "webpack": "^1.12.1",
23 | "webpack-dev-middleware": "^1.2.0",
24 | "webpack-hot-middleware": "^2.0.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/examples/basic/server.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import webpack from 'webpack';
3 | import config from './webpack.config.clientDev';
4 | import path from 'path';
5 |
6 | import webpackDevMiddleware from 'webpack-dev-middleware';
7 | import webpackHotMiddleware from 'webpack-hot-middleware';
8 |
9 | const app = express();
10 | const compiler = webpack(config);
11 |
12 | app.use(webpackDevMiddleware(compiler, {
13 | noInfo: true,
14 | publicPath: config.output.publicPath
15 | }));
16 |
17 | app.use(webpackHotMiddleware(compiler));
18 |
19 | app.get('*', (req, res) => {
20 | res.sendFile(path.join(__dirname, 'index.html'));
21 | });
22 |
23 | app.listen(3000, 'localhost', error => {
24 | if (error) {
25 | console.log(error);
26 | return;
27 | }
28 |
29 | console.log('Listening at http://localhost:3000');
30 | });
31 |
--------------------------------------------------------------------------------
/src/useDefaults.js:
--------------------------------------------------------------------------------
1 | const defaults = {
2 | onError: error => { throw error; },
3 | routerStateSelector: state => state.router
4 | };
5 |
6 | export default function useDefaults(next) {
7 | return options => createStore => (reducer, initialState) => {
8 | const optionsWithDefaults = { ...defaults, ...options };
9 |
10 | const {
11 | createHistory: baseCreateHistory,
12 | history: baseHistory,
13 | } = optionsWithDefaults;
14 |
15 | let createHistory;
16 | if (typeof baseCreateHistory === 'function') {
17 | createHistory = baseCreateHistory;
18 | } else if (baseHistory) {
19 | createHistory = () => baseHistory;
20 | } else {
21 | createHistory = null;
22 | }
23 |
24 | return next({
25 | ...optionsWithDefaults,
26 | createHistory
27 | })(createStore)(reducer, initialState);
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-airbnb",
3 | "env": {
4 | "browser": true,
5 | "mocha": true,
6 | "node": true
7 | },
8 | "globals": {
9 | "expect": true
10 | },
11 | "rules": {
12 | "comma-dangle": 0,
13 | "no-wrap-func": 0,
14 | "spaced-comment": 0,
15 |
16 | "no-undef": 2,
17 |
18 | // Doesn't play nice with chai's assertions
19 | "no-unused-expressions": 0,
20 |
21 | // Discourages microcomponentization
22 | "react/no-multi-comp": 0,
23 |
24 | "react/jsx-uses-react": 2,
25 | "react/jsx-uses-vars": 2,
26 | "react/react-in-jsx-scope": 2,
27 |
28 | //Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
29 | "block-scoped-var": 0,
30 | // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
31 | "padded-blocks": 0
32 | },
33 | "plugins": [
34 | "react"
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-2016 Andrew Clark
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/webpack.config.base.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 |
4 | const PROJECT_SRC = path.resolve(__dirname, '../src');
5 |
6 | const babelrc = fs.readFileSync(path.join('..', '.babelrc'));
7 | let babelLoaderQuery = {};
8 |
9 | try {
10 | babelLoaderQuery = JSON.parse(babelrc);
11 | } catch (err) {
12 | console.error('Error parsing .babelrc.');
13 | console.error(err);
14 | }
15 | babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
16 | babelLoaderQuery.plugins.push('react-transform');
17 | babelLoaderQuery.extra = babelLoaderQuery.extra || {};
18 | babelLoaderQuery.extra['react-transform'] = {
19 | transforms: [{
20 | transform: 'react-transform-hmr',
21 | imports: ['react'],
22 | locals: ['module']
23 | }]
24 | };
25 |
26 | export default {
27 | module: {
28 | loaders: [{
29 | test: /\.js$/,
30 | loader: 'babel',
31 | query: babelLoaderQuery,
32 | exclude: path.resolve(__dirname, 'node_modules'),
33 | include: [
34 | path.resolve(__dirname),
35 | PROJECT_SRC
36 | ]
37 | }]
38 | },
39 | resolve: {
40 | alias: {
41 | 'redux-router': PROJECT_SRC
42 | },
43 | extensions: ['', '.js']
44 | }
45 | };
46 |
--------------------------------------------------------------------------------
/examples/server-rendering/client.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { createStore, compose } from 'redux';
4 |
5 | import {
6 | ReduxRouter,
7 | reduxReactRouter,
8 | } from 'redux-router';
9 |
10 | import { Provider } from 'react-redux';
11 | import { devTools } from 'redux-devtools';
12 | import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
13 | import createHistory from 'history/lib/createBrowserHistory';
14 |
15 | import routes from './routes';
16 | import reducer from './reducer';
17 | import {MOUNT_ID} from './constants';
18 |
19 | const store = compose(
20 | reduxReactRouter({ createHistory }),
21 | devTools()
22 | )(createStore)(reducer, window.__initialState);
23 |
24 | const rootComponent = (
25 |
26 |
27 |
28 | );
29 |
30 | const mountNode = document.getElementById(MOUNT_ID);
31 |
32 | // First render to match markup from server
33 | ReactDOM.render(rootComponent, mountNode);
34 | // Optional second render with dev-tools
35 | ReactDOM.render((
36 |
37 | {rootComponent}
38 |
39 |
40 |
41 |
42 | ), mountNode);
43 |
--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 | ## Version
25 |
26 | ## Steps to reproduce
27 |
28 | ## Expected Behavior
29 |
30 | ## Actual Behavior
31 |
--------------------------------------------------------------------------------
/src/reduxReactRouter.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware } from 'redux';
2 | import { useRouterHistory, createRoutes } from 'react-router';
3 | import createTransitionManager from 'react-router/lib/createTransitionManager' ;
4 | import historyMiddleware from './historyMiddleware';
5 | import { ROUTER_STATE_SELECTOR } from './constants';
6 |
7 | export default function reduxReactRouter({
8 | routes,
9 | createHistory,
10 | parseQueryString,
11 | stringifyQuery,
12 | routerStateSelector
13 | }) {
14 | return createStore => (reducer, initialState) => {
15 |
16 | let baseCreateHistory;
17 | if (typeof createHistory === 'function') {
18 | baseCreateHistory = createHistory;
19 | } else if (createHistory) {
20 | baseCreateHistory = () => createHistory;
21 | }
22 |
23 | const createAppHistory = useRouterHistory(baseCreateHistory);
24 |
25 | const history = createAppHistory({
26 | parseQueryString,
27 | stringifyQuery,
28 | });
29 |
30 | const transitionManager = createTransitionManager(
31 | history, createRoutes(routes)
32 | );
33 |
34 | const store =
35 | applyMiddleware(
36 | historyMiddleware(history)
37 | )(createStore)(reducer, initialState);
38 |
39 | store.transitionManager = transitionManager;
40 | store.history = history;
41 | store[ROUTER_STATE_SELECTOR] = routerStateSelector;
42 |
43 | return store;
44 | };
45 | }
46 |
--------------------------------------------------------------------------------
/examples/server-rendering/components.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import {connect} from 'react-redux';
3 | import {Link} from 'react-router';
4 |
5 | @connect(state => ({ routerState: state.router }))
6 | export const App = class App extends Component {
7 | static propTypes = {
8 | children: PropTypes.node
9 | }
10 |
11 | render() {
12 | // Display is only used for rendering, its not a property of
13 | const links = [
14 | { pathname: '/', display: '/'},
15 | { pathname: '/parent', query: { foo: 'bar' }, display: '/parent?foo=bar'},
16 | { pathname: '/parent/child', query: { bar: 'baz' }, display: '/parent/child?bar=baz'},
17 | { pathname: '/parent/child/123', query: { baz: 'foo' }, display: '/parent/child/123?baz=foo'}
18 | ].map((l, i) =>
19 |
20 | {l.display}
21 |
22 | );
23 |
24 | return (
25 |
26 |
App Container
27 | {links}
28 | {this.props.children}
29 |
30 | );
31 | }
32 | };
33 |
34 | export const Parent = class Parent extends Component {
35 | static propTypes = {
36 | children: PropTypes.node
37 | }
38 |
39 | render() {
40 | return (
41 |
42 |
Parent
43 | {this.props.children}
44 |
45 | );
46 | }
47 | };
48 |
49 | export const Child = class Child extends Component {
50 | render() {
51 | const { params: { id }} = this.props;
52 |
53 | return (
54 |
55 |
Child
56 | {id &&
{id}
}
57 |
${markup}
40 |
41 |
42 |
43 |
44 | `;
45 | };
46 |
47 | app.use(webpackDevMiddleware(compiler, {
48 | noInfo: true,
49 | publicPath: config.output.publicPath
50 | }));
51 |
52 | app.use(webpackHotMiddleware(compiler));
53 |
54 | app.use((req, res) => {
55 | const store = reduxReactRouter({ routes, createHistory: createMemoryHistory })(createStore)(reducer);
56 | const query = qs.stringify(req.query);
57 | const url = req.path + (query.length ? '?' + query : '');
58 |
59 | store.dispatch(match(url, (error, redirectLocation, routerState) => {
60 | if (error) {
61 | console.error('Router error:', error);
62 | res.status(500).send(error.message);
63 | } else if (redirectLocation) {
64 | res.redirect(302, redirectLocation.pathname + redirectLocation.search);
65 | } else if (!routerState) {
66 | res.status(400).send('Not Found');
67 | } else {
68 | res.status(200).send(getMarkup(store));
69 | }
70 | }));
71 | });
72 |
73 | app.listen(3000, 'localhost', error => {
74 | if (error) {
75 | console.log(error);
76 | return;
77 | }
78 |
79 | console.log('Listening at http://localhost:3000');
80 | });
81 |
--------------------------------------------------------------------------------
/src/ReduxRouter.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import { RouterContext as DefaultRoutingContext } from 'react-router';
4 | import { createRouterObject } from 'react-router/lib/RouterUtils';
5 | import routerStateEquals from './routerStateEquals';
6 | import { ROUTER_STATE_SELECTOR } from './constants';
7 | import { initRoutes, replaceRoutes } from './actionCreators';
8 |
9 | function memoizeRouterStateSelector(selector) {
10 | let previousRouterState = null;
11 |
12 | return state => {
13 | const nextRouterState = selector(state);
14 | if (routerStateEquals(previousRouterState, nextRouterState)) {
15 | return previousRouterState;
16 | }
17 | previousRouterState = nextRouterState;
18 | return nextRouterState;
19 | };
20 | }
21 |
22 | function getRoutesFromProps(props) {
23 | return props.routes || props.children;
24 | }
25 |
26 | class ReduxRouter extends Component {
27 | static propTypes = {
28 | children: PropTypes.node
29 | }
30 |
31 | static contextTypes = {
32 | store: PropTypes.object
33 | }
34 |
35 | constructor(props, context) {
36 | super(props, context);
37 | this.router = createRouterObject(context.store.history, context.store.transitionManager);
38 | }
39 |
40 | componentWillMount() {
41 | this.context.store.dispatch(initRoutes(getRoutesFromProps(this.props)));
42 | }
43 |
44 | componentWillReceiveProps(nextProps) {
45 | this.receiveRoutes(getRoutesFromProps(nextProps));
46 | }
47 |
48 | receiveRoutes(routes) {
49 | if (!routes) return;
50 |
51 | const { store } = this.context;
52 | store.dispatch(replaceRoutes(routes));
53 | }
54 |
55 | render() {
56 | const { store } = this.context;
57 |
58 | if (!store) {
59 | throw new Error(
60 | 'Redux store missing from context of . Make sure you\'re '
61 | + 'using a '
62 | );
63 | }
64 |
65 | const {
66 | history,
67 | [ROUTER_STATE_SELECTOR]: routerStateSelector
68 | } = store;
69 |
70 | if (!history || !routerStateSelector) {
71 | throw new Error(
72 | 'Redux store not configured properly for . Make sure '
73 | + 'you\'re using the reduxReactRouter() store enhancer.'
74 | );
75 | }
76 |
77 | return (
78 |
84 | );
85 | }
86 | }
87 |
88 | @connect(
89 | (state, { routerStateSelector }) => routerStateSelector(state) || {}
90 | )
91 | class ReduxRouterContext extends Component {
92 | static propTypes = {
93 | location: PropTypes.object,
94 | RoutingContext: PropTypes.func
95 | }
96 |
97 | render() {
98 | const {location} = this.props;
99 |
100 | if (location === null || location === undefined) {
101 | return null; // Async matching
102 | }
103 |
104 | const RoutingContext = this.props.RoutingContext || DefaultRoutingContext;
105 |
106 | return ;
107 | }
108 | }
109 |
110 | export default ReduxRouter;
111 |
--------------------------------------------------------------------------------
/examples/basic/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { createStore, compose, combineReducers } from 'redux';
4 |
5 | import {
6 | ReduxRouter,
7 | routerStateReducer,
8 | reduxReactRouter,
9 | push,
10 | } from 'redux-router';
11 |
12 | import { Route, Link } from 'react-router';
13 | import { Provider, connect } from 'react-redux';
14 | import { devTools } from 'redux-devtools';
15 | import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
16 | import { createHistory } from 'history';
17 |
18 | @connect((state) => ({}))
19 | class App extends Component {
20 | static propTypes = {
21 | children: PropTypes.node
22 | }
23 |
24 | constructor(props) {
25 | super(props);
26 | this.handleClick = this.handleClick.bind(this);
27 | }
28 |
29 | handleClick(event) {
30 | event.preventDefault();
31 | const { dispatch } = this.props;
32 |
33 | dispatch(push({ pathname: '/parent/child/custom' }));
34 | }
35 |
36 | render() {
37 | // Display is only used for rendering, its not a property of
38 | const links = [
39 | { pathname: '/', display: '/'},
40 | { pathname: '/parent', query: { foo: 'bar' }, display: '/parent?foo=bar'},
41 | { pathname: '/parent/child', query: { bar: 'baz' }, display: '/parent/child?bar=baz'},
42 | { pathname: '/parent/child/123', query: { baz: 'foo' }, display: '/parent/child/123?baz=foo'}
43 | ].map((l, i) =>
44 |
45 | {l.display}
46 |
47 | );
48 |
49 | return (
50 |
59 | );
60 | }
61 | }
62 |
63 | class Parent extends Component {
64 | static propTypes = {
65 | children: PropTypes.node
66 | }
67 |
68 | render() {
69 | return (
70 |
71 |
Parent
72 | {this.props.children}
73 |
74 | );
75 | }
76 | }
77 |
78 | class Child extends Component {
79 | render() {
80 | const { params: { id }} = this.props;
81 |
82 | return (
83 |
84 |
Child
85 | {id &&
{id}
}
86 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
36 |
{`Pathname: ${location.pathname}`}
37 | {children}
38 |
51 |
52 | {this.props.children}
53 |
54 | );
55 | }
56 | }
57 |
58 | class Child extends Component {
59 | render() {
60 | return (
61 |
62 | );
63 | }
64 | }
65 |
66 | function redirectOnEnter(pathname) {
67 | return (routerState, replace) => replace(null, pathname);
68 | }
69 |
70 | const routes = (
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | );
79 |
80 |
81 | describe('', () => {
82 | jsdom();
83 |
84 | function renderApp() {
85 | const reducer = combineReducers({
86 | router: routerStateReducer
87 | });
88 |
89 | const history = createHistory();
90 | const store = reduxReactRouter({
91 | history
92 | })(createStore)(reducer);
93 |
94 | store.dispatch(push({ pathname: '/parent/child/123', query: { key: 'value' } }));
95 |
96 | return renderIntoDocument(
97 |
98 |
99 | {routes}
100 |
101 |
102 | );
103 | }
104 |
105 | it('renders a React Router app using state from a Redux ', () => {
106 | const tree = renderApp();
107 |
108 | const child = findRenderedComponentWithType(tree, Child);
109 | expect(child.props.location.pathname).to.equal('/parent/child/123');
110 | expect(child.props.location.query).to.eql({ key: 'value' });
111 | expect(child.props.params).to.eql({ id: '123' });
112 | });
113 |
114 | it('only renders once on initial load', () => {
115 | const reducer = combineReducers({
116 | router: routerStateReducer
117 | });
118 |
119 | const history = createHistory();
120 | const store = reduxReactRouter({
121 | history
122 | })(createStore)(reducer);
123 |
124 | store.dispatch(push({ pathname: '/parent/child/123', query: { key: 'value' } }));
125 |
126 | const historySpy = sinon.spy();
127 | history.listen(() => historySpy());
128 |
129 | renderIntoDocument(
130 |
131 |
132 | {routes}
133 |
134 |
135 | );
136 |
137 | expect(historySpy.callCount).to.equal(1);
138 | });
139 |
140 | it('should accept React.Components for "RoutingContext" prop of ReduxRouter', () => {
141 | const reducer = combineReducers({
142 | router: routerStateReducer
143 | });
144 |
145 | const history = createHistory();
146 | const store = reduxReactRouter({
147 | history
148 | })(createStore)(reducer);
149 |
150 | store.dispatch(push({ pathname: '/parent/child/123', query: { key: 'value' } }));
151 |
152 | const consoleErrorSpy = sinon.spy(console, 'error');
153 |
154 | renderIntoDocument(
155 |
156 |
157 | {routes}
158 |
159 |
160 | );
161 |
162 | console.error.restore(); // eslint-disable-line no-console
163 |
164 | expect(consoleErrorSpy.called).to.be.false;
165 | });
166 |
167 | it('should accept stateless React components for "RoutingContext" prop of ReduxRouter', () => {
168 | const reducer = combineReducers({
169 | router: routerStateReducer
170 | });
171 |
172 | const history = createHistory();
173 | const store = reduxReactRouter({
174 | history
175 | })(createStore)(reducer);
176 |
177 | store.dispatch(push({ pathname: '/parent/child/123', query: { key: 'value' } }));
178 |
179 | const consoleErrorSpy = sinon.spy(console, 'error');
180 |
181 | renderIntoDocument(
182 |
183 | }>
184 | {routes}
185 |
186 |
187 | );
188 |
189 | console.error.restore(); // eslint-disable-line no-console
190 |
191 | expect(consoleErrorSpy.called).to.be.false;
192 | });
193 |
194 | it('should not accept non-React-components for "RoutingContext" prop of ReduxRouter', () => {
195 | const reducer = combineReducers({
196 | router: routerStateReducer
197 | });
198 |
199 | const history = createHistory();
200 | const store = reduxReactRouter({
201 | history
202 | })(createStore)(reducer);
203 |
204 | store.dispatch(push({ pathname: '/parent/child/123', query: { key: 'value' } }));
205 |
206 | class CustomRouterContext extends React.Component {
207 | render() {
208 | return ;
209 | }
210 | }
211 |
212 | const consoleErrorSpy = sinon.spy(console, 'error');
213 |
214 | const render = () => renderIntoDocument(
215 |
216 |
217 | {routes}
218 |
219 |
220 | );
221 |
222 | const invalidElementTypeErrorMessage = 'Element type is invalid: expected a string (for built-in components) ' +
223 | 'or a class/function (for composite components) but got: object. ' +
224 | 'Check the render method of `ReduxRouterContext`.';
225 |
226 | const routingContextInvalidPropErrorMessage = 'Invalid prop `RoutingContext` of type `object` supplied to `ReduxRouterContext`';
227 |
228 | const routingContextInvalidElementTypeErrorMessage = 'React.createElement: type should not be null, undefined, boolean, or number. ' +
229 | 'It should be a string (for DOM elements) or a ReactClass (for composite components). ' +
230 | 'Check the render method of `ReduxRouterContext`.';
231 |
232 | expect(render).to.throw(invalidElementTypeErrorMessage);
233 |
234 | console.error.restore(); // eslint-disable-line no-console
235 |
236 | expect(consoleErrorSpy.calledTwice).to.be.true;
237 |
238 | expect(consoleErrorSpy.args[0][0]).to.contain(routingContextInvalidPropErrorMessage);
239 | expect(consoleErrorSpy.args[1][0]).to.contain(routingContextInvalidElementTypeErrorMessage);
240 | });
241 |
242 | // does stuff inside `onClick` that makes it difficult to test.
243 | // They work in the example.
244 | // TODO: Refer to React Router tests once they're completed
245 | it.skip('works with ', () => {
246 | const tree = renderApp();
247 |
248 | const child = findRenderedComponentWithType(tree, Child);
249 | expect(child.props.location.pathname).to.equal('/parent/child/123');
250 | const link = findRenderedDOMComponentWithTag(tree, 'a');
251 |
252 | Simulate.click(link);
253 | expect(child.props.location.pathname).to.equal('/parent/child/321');
254 | });
255 |
256 | describe('server-side rendering', () => {
257 | it('works', () => {
258 | const reducer = combineReducers({
259 | router: routerStateReducer
260 | });
261 |
262 | const store = server.reduxReactRouter({ routes, createHistory })(createStore)(reducer);
263 | store.dispatch(server.match('/parent/child/850?key=value', (err, redirectLocation, routerState) => {
264 | const output = renderToString(
265 |
266 |
267 |
268 | );
269 | expect(output).to.match(/Pathname: \/parent\/child\/850/);
270 | expect(routerState.location.query).to.eql({ key: 'value' });
271 | }));
272 | });
273 |
274 | it('should gracefully handle 404s', () => {
275 | const reducer = combineReducers({
276 | router: routerStateReducer
277 | });
278 |
279 | const store = server.reduxReactRouter({ routes, createHistory })(createStore)(reducer);
280 | expect(() => store.dispatch(server.match('/404', () => {})))
281 | .to.not.throw();
282 | });
283 |
284 | it('throws if routes are not passed to store enhancer', () => {
285 | const reducer = combineReducers({
286 | router: routerStateReducer
287 | });
288 |
289 | expect(() => server.reduxReactRouter()(createStore)(reducer))
290 | .to.throw(
291 | 'When rendering on the server, routes must be passed to the '
292 | + 'reduxReactRouter() store enhancer; routes as a prop or as children '
293 | + 'of is not supported. To deal with circular '
294 | + 'dependencies between routes and the store, use the '
295 | + 'option getRoutes(store).'
296 | );
297 | });
298 |
299 | it('throws if createHistory is not passed to store enhancer', () => {
300 | const reducer = combineReducers({
301 | router: routerStateReducer
302 | });
303 |
304 | expect(() => server.reduxReactRouter({ routes })(createStore)(reducer))
305 | .to.throw(
306 | 'When rendering on the server, createHistory must be passed to the '
307 | + 'reduxReactRouter() store enhancer'
308 | );
309 | });
310 |
311 | it('handles redirects', () => {
312 | const reducer = combineReducers({
313 | router: routerStateReducer
314 | });
315 |
316 | const store = server.reduxReactRouter({ routes, createHistory })(createStore)(reducer);
317 | store.dispatch(server.match('/redirect', (error, redirectLocation) => {
318 | expect(error).to.be.null;
319 | expect(redirectLocation.pathname).to.equal('/parent/child/850');
320 | }));
321 | });
322 | });
323 |
324 | describe('dynamic route switching', () => {
325 | it('updates routes wnen receives new props', () => {
326 | const newRoutes = (
327 |
328 | );
329 |
330 | const reducer = combineReducers({
331 | router: routerStateReducer
332 | });
333 |
334 | const history = createHistory();
335 | const store = reduxReactRouter({ history })(createStore)(reducer);
336 |
337 | class RouterContainer extends Component {
338 | state = { routes }
339 |
340 | render() {
341 | return (
342 |
343 |
344 |
345 | );
346 | }
347 | }
348 |
349 | store.dispatch(push({ pathname: '/parent/child' }));
350 | const tree = renderIntoDocument();
351 |
352 |
353 | expect(store.getState().router.params).to.eql({});
354 | tree.setState({ routes: newRoutes });
355 | expect(store.getState().router.params).to.eql({ route: 'child' });
356 | });
357 | });
358 | });
359 |
--------------------------------------------------------------------------------