React Router Redux 从 v3 升级到 v4

Question

我正在尝试将 react-router 从 v3 升级到 v4，并在运行应用程序时收到以下错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

减速器：

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import { login } from './login-reducer';

const reducers = combineReducers({
  routing: routerReducer,
  login
})

export default reducers;

商店：

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory'
import { routerMiddleware } from 'react-router-redux'

import reducers from '../reducers';

export const history = createHistory();
const routerMiddle = routerMiddleware(history);

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

let middleware = [routerMiddle, thunk]
const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);

const store = createStore(reducers, enhancer);

export default store;

索引： 从“反应”导入反应；

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store, { history } from './store/createStore';
import { ConnectedRouter } from 'react-router-redux'

import { getRoutes } from './routes';

import './index.css';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>{ getRoutes(store) }</div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

路线：

import React from 'react';
import { Route } from 'react-router';

import App from './containers/App';
import Login from './containers/Login';
import Protected from './components/Protected';

export const getRoutes = (store) => {
  const authRequired = (nextState, replaceState) => {
    // Now you can access the store object here.
    const state = store.getState();

    if (!state.login.loggedIn || state.login.loggedIn == null) {
      // Not authenticated, redirect to login.
      replaceState({
        pathname: '/login',
        state: { nextPathname: nextState.location.pathname }
      });
    }
  };

  return (
    <div>
      <Route exact path="/" component={App} />
      <Route path="/login" component={Login} />
      <Route path="/protected" component={Protected} onEnter={authRequired} />
    </div>
  );
}

应用程序：

import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'

import logo from '../logo.svg';
import './App.css';

class App extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2><Link to="/">Welcome to React</Link></h2>
          <div className="app-nav">
            <nav>
              <Link to='about'>About</Link>
              <Link to='login'>{( isLoggedIn ? 'Logout' : 'Login' )}</Link>
              <Link to='protected'>Protected</Link>
            </nav>
          </div>
        </div>
        {this.props.children}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isLoggedIn:  (state.login.loggedIn ? state.login.loggedIn : false) 
  }
}

App = connect (
  mapStateToProps
)(App)

export default App;

不知道我缺少什么才能让它工作

**注意：即使我只有一个路由 / 并呈现静态组件（带文本的单个 div），我仍然会看到此错误

Answer 1

A) 你根本不需要 react router redux 和 react router 4，特别是如果你只想渲染经过身份验证的组件。

B) onEnter 钩子在 RR4 中不能以这种方式工作，它是进行路由验证的旧方式

{this.props.children}为什么还在用 props.children 渲染子路由？所有子路由都进入它所在的组件。

如果您正在尝试学习 rr4，我建议您查看此样板文件https://github.com/touqeerkhan11/The-Ultimate-Boilerplate

Answer 2

问题可能就在这里

import { Link } from 'react-router';

react-router 不会导出 Link，react-router-dom 会。

import { Link } from 'react-router-dom';

您也应该从react-router-dom 导入Route 组件。

Answer 3

问题与所使用的 react-router-redux 版本有关。当我将它添加到项目中时，我离开了@next