javascript - 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.

reducer :

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

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

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

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

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