javascript - 警告 : Memory Router ignores the history props

Question

我正在研究 React Native 以构建应用程序。出于这个原因，我使用了 react-router-redux 但我收到了两个疯狂的警告，它说: 警告:忽略 history Prop 。要使用自定义历史记录，请使用“import {Router}”而不是“import{MemoryRouter as Router}”

这是我的代码:

我的 index.android.js:

import {AppRegistry} from 'react-native';
import Home from './app/components/Home';
AppRegistry.registerComponent('myCode', () => 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>
        );
    }
}

这是我的 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);
}

我创建了一个支持所有类型 reducer 的 reducer :

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;
    }
};

Answer 1

通过删除 react-router-redux 包并安装 react-router-redux": "^5.0.0-alpha.6 问题解决了，但我在这部分关心的另一件事是这个版本没有syncHistoryWithStore 方法所以在这部分我改变了 App 是这样的:

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>
        );
    }
}