v3からv4への移行時にエラーが発生する

Question

私はv3ではなくreact-router v4を使用し、私のパスを変更してv4のルータとreduxで動作することにしましたが、すべてのコンポーネントがデフォルトのエクスポートを使用していて、何かをエクスポートすることを忘れないでください）。私のコードで何が間違っていますか？

要素型が無効ですが：（内蔵部品のための）文字列 か（複合コンポーネント用）クラス/機能を期待したが得た：未定義。あなた、私が働いていたこのv3のルータコード、電源を入れてみました おそらくそれはで定義されていたファイルからコンポーネントをエクスポートするのを忘れ

：

<Router history={history}> 
    <Route path="/" component={App}> 
    <IndexRoute component={UserGrid}></IndexRoute> 
    <Route path="/login" component={Login}></Route> 
    <Route path="https://stackoverflow.com/users/:userId" component={UserPage}></Route> 
    <Route path="/registration" component={RegistrationPage}></Route> 
    <Route path="/topSecret" component={requireAuth(SecretComponent)}></Route> 
    </Route> 
</Router> 

をv4のコードにそうように：

const history = createBrowserHistory() 

const router = (
    <Provider store={store}> 
    <BrowserRouter history={history}> 
     <App> 
      <Route exact path="/" component={UserGrid}></Route> 
      <Route path="/login" component={Login}></Route> 
      <Route path="https://stackoverflow.com/users/:userId" component={UserPage}></Route> 
      <Route path="/registration" component={RegistrationPage}></Route> 
      <Route path="/topSecret" component={requireAuth(SecretComponent)}></Route> 
     </App> 
    </BrowserRouter> 
    </Provider> 
) 

ReactDOM.render(
    router, 
    document.getElementById('root') 
) 

。

App.js：

class App extends React.Component { 
    render() { 
     return (
      <div> 
       <NavBar /> 
       {React.cloneElement(this.props.children, this.props)} 
      </div> 
     ) 
    } 
} 

function mapStateToProps (state) { 
    return { 
    session: state.session, 
    users: state.users 
    } 
} 

function mapDispatchToProps (dispatch) { 
    return bindActionCreators(actionCreators, dispatch) 
} 


export default connect(mapStateToProps, mapDispatchToProps)(App) 

ストア：私はアプリケーション（それは子供たちのために下の小道具を渡した容器）に{React.cloneElement(this.props.children, this.props)}を取り除き、this.props.childrenに置き換えて、私の問題を解決し、個別にストアに状態を必要とするコンポーネントを、接続

import {applyMiddleware, createStore} from 'redux' 
import {createLogger} from 'redux-logger' 
import { connectRouter, routerMiddleware } from 'connected-react-router' 
import thunk from 'redux-thunk' 
import { createBrowserHistory } from 'history' 
import rootReducer from '../reducers/rootReducer' 
import async from '../middlewares/async' 
import {authUser} from '../actions/actionCreators' 

const history = createBrowserHistory() 

const initialState = { 
    bla-bla 
} 

const store = createStore(
    connectRouter(history)(rootReducer), 
    initialState, 
    applyMiddleware(
    async, 
    thunk, 
    routerMiddleware(history), 
    createLogger() 
) 
) 

export default store 

Answer 1

。しかし、私はまだそれがうまくいかない理由で不思議です{React.cloneElement(this.props.children, this.props)}