Я пытаюсь выполнить этот ретранслятор ретрансляции, чтобы я мог перенаправлять, используя push ('/') в моих компонентах или действиях.
Учебник: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux
Я не уверен, что я пропущу, но я получаю сообщение об ошибке.
Ошибка, которую я получаю в консоли хром:
bundle.js: 3090 Warning: React.createElement: type недопустим - ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получила: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, который он определил, или вы могли бы перепутать импорт по умолчанию и названный импорт.
Проверьте метод рендеринга
Root
. в Корневой печатиWarning @bundle.js: 3090bundle.js: 2684 Ошибка поиска: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но полученная: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, который он определил, или вы могли бы перепутать импорт по умолчанию и названный импорт.
bundle.js: 20893 Указанная ошибка произошла в компоненте: в Провайдере (созданном Root) в Root
index.js
import React from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { routerReducer, routerMiddleware, push } from 'react-router-redux'
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import reducers from './reducers';
import Root from './root';
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
let middleware = [thunk, routerMiddleware(history)]
const store = createStore(
combineReducers({
...reducers,
router: routerReducer
}),
applyMiddleware(...middleware)
);
render(
<Root store={store} history={history} />,
document.getElementById('app')
);
root.js
import React from 'react';
import PropTypes from 'prop-types';
import {
BrowserRouter as Router,
Route,
Link,
Switch,
} from 'react-router-dom';
import { ConnectedRouter } from 'react-router-redux';
import { Provider } from 'react-redux';
import App from './components/app';
const Root = ({ store, history }) => (
<Provider store={store}>
<ConnectedRouter history={history}>
<div className="application-container">
<App>
<Switch>
</Switch>
</App>
</div>
</ConnectedRouter>
</Provider>
);
Root.propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
export default Root;
/reducers/index.js
import { combineReducers } from 'redux';
import users from './users';
const reducers = combineReducers({
users,
});
export default reducers;
users.js
import Constants from '../constants';
const initialState = {
users: [],
fetching: false,
};
const users = (state = initialState, action) => {
switch (action.type) {
case Constants.LOADING_USERS:
return {...state, fetching: true};
default:
return state;
}
};
export default users;
my package.json deps:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"colors": "^1.1.2",
"compression": "^1.7.1",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"express": "^4.16.2",
"jest": "^22.0.6",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.10.1",
"webpack-hot-middleware": "^2.21.0"
},
"dependencies": {
"axios": "^0.17.1",
"history": "^4.7.2",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},