Получение ошибки при переходе с v3 на v4 response-router

Я решил использовать response-router v4 вместо v3 и изменить свои пути, чтобы они работали с v4 маршрутизатора и redux, но я получаю ошибку ниже (я экспортировал все компоненты, используя экспорт по умолчанию, и не забыл экспортировать что-либо). Что не так с моим кодом?

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен.

Я попытался включить этот код маршрутизатора v3, который работал:

<Router history={history}>
  <Route path="/" component={App}>
    <IndexRoute component={UserGrid}></IndexRoute>
    <Route path="/login" component={Login}></Route>
    <Route path="/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="/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

person Umbrella    schedule 06.05.2017    source источник


Ответы (1)


Я удалил {React.cloneElement(this.props.children, this.props)} в приложении (контейнер, который передает реквизиты своим дочерним элементам) и заменил его на this.props.children и подключил компоненты, которые нуждаются в состоянии, к хранилищу индивидуально, что решило мою проблему. Но мне все еще интересно, почему это не работает с {React.cloneElement(this.props.children, this.props)}

person Umbrella    schedule 06.05.2017