我正在使用react native来构建应用程序。出于这个原因,我使用react-router-redux,但我得到两个疯狂的警告,它说: 警告:忽略历史道具。要使用自定义历史记录,请使用' 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;
}
};
答案 0 :(得分:2)
通过删除react-router-redux软件包并安装react-router-redux&#34;:&#34; ^ 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>
);
}
}