Warning: Memory Router ignores the history props

Question

I'm working on react native to build an application. for this reason i used react-router-redux but i get two crazy warning that it says: Warning: ignores the history prop. to use a custom history , use 'import {Router}' instead of 'import{MemoryRouter as Router}'

this is my code:

my index.android.js:

import {AppRegistry} from 'react-native';
import Home from './app/components/Home';
AppRegistry.registerComponent('myCode', () => Home);

my Home:

import React, { Component } from 'react';
import { NativeRouter as Router, Route } from 'react-router-native';
import createHistory from 'history/createMemoryHistory';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';

import configureStore from '../config/store';
import launch from './launch';
import Dinner from '../components/Dinner';
export default class Home extends Component {
    render() {
        const history = createHistory();
        const store = configureStore(history);
        const appHistory = syncHistoryWithStore(history, store);
        return (
            <Provider store={store}>
                <Router history={appHistory}>
                    <Route path="/" component={launch}>
                        <Route path="dinner" component={Dinner} />
                    </Route>
                </Router>
            </Provider>
        );
    }
}

and this is my store.js:

import { applyMiddleware, createStore } from 'redux';
import { routerMiddleware  } from 'react-router-redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';

import reducer from '../reducers/index';

export default function configureStore(history) {
    const middleware = applyMiddleware(
        promiseMiddleware(),
        thunk,
        routerMiddleware(history));
    return createStore(reducer, {}, middleware);
}

i created a reducers which support all type of reducers:

const initialState = {
    data: {},
    error: null,
    fetching: false,
    fetched: false,
};

export default function reducer(state=initialState, action) {
    switch (action.type) {
        case (action.type.match(/^.*_PENDING$/) || {}).input:
            // Action is pending (request is in progress)
            return {...state, fetching: true};
        case (action.type.match(/^.*_FULFILLED$/) || {}).input:
            // Action is fulfilled (request is successful/promise resolved)
            return {
                ...state,
                data: action.payload.data,
                fetched: true,
                fetching: false};
        case (action.type.match(/^.*_REJECTED$/) || {}).input:
            // Action is rejected (request failed/promise rejected)
            return {
                ...state,
                error: action.payload,
                fetched: false,
                fetching: false
            };
        default:
            return state;
    }
};

Hussein Ojaghi Hussein Ojaghi · Accepted Answer · 2017-09-19T10:15:16

By removing react-router-redux package and installing react-router-redux": "^5.0.0-alpha.6 the problem solved but the other thing that i care in this part is that this version doesn't have syncHistoryWithStore method so in this part i changed App like this:

import React, {Component} from 'react';
import {Route} from 'react-router-native';
import createHistory from 'history/createMemoryHistory';
import {Provider} from 'react-redux';
import {Switch} from 'react-router'
import {ConnectedRouter} from 'react-router-redux';

import configureStore from './store';
import Home from './components/Home';
import About from './components/About';

export default class App extends Component {
    render() {
        const history = createHistory();
        const store = configureStore(history);
        return (
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Switch>
                        <Route path="/" component={Home}/>
                        <Route path="/about" component={About}/>
                    </Switch>
                </ConnectedRouter>
            </Provider>
        );
    }
}

Warning: Memory Router ignores the history props

1 Answers