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;

索引：从 'react';

导入 React

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

问题大概就在这里

import { Link } from 'react-router';

react-router doesn't export Link, react-router-dom 会。

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

您或许还应该从 react-router-dom 中导入 Route 组件。

Answer 2

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

Answer 3

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

B) onEnter 挂钩在 RR4 中不是这样工作的，它是进行路由验证的旧方法

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

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

React Router Redux 从 v3 升级到 v4

React Router Redux upgrade from v3 to v4

javascript

reactjs

react-router

react-redux

react-router-redux