從v3遷移到v4時出現錯誤react-router

我決定使用react-router v4而不是v3並更改我的路徑，以便它們可以與路由器和redux的v4一起使用，但是我得到了下面的錯誤（我導出了所有使用導出默認的組件，並沒有忘記導出任何東西）。我的代碼有什麼問題？從v3遷移到v4時出現錯誤react-router

元類型無效：預期的字符串（用於內置組件）或類/功能（用於複合部件），但得到了：未定義。您可能忘了您的組件從它的定義文件導出

我試圖把這個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)

商店：

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

來源

2017-05-06 Umbrella

我的應用程序（即通過道具到它的孩子們的容器）取出{React.cloneElement(this.props.children, this.props)}與this.props.children取代它和連接的解決我的問題需要國家的商店單獨的組件。但我仍然想知道爲什麼它不起作用{React.cloneElement(this.props.children, this.props)}

來源

2017-05-06 13:16:54 Umbrella

從v3遷移到v4時出現錯誤react-router

回答

相關問題