Контекст `router.history` помечен как обязательный в` Link`, но его значение равно `undefined`

Question

Во время создания вкладок в моем реактивном приложении я получил стек из-за ошибки

 warning.js:33 Warning: Failed context type: The context 
   `router.history` is marked as required in `Link`, but 
  its value is `undefined`.
in Link (created by ChatIndexContainer)
in li (created by ChatIndexContainer)
in ul (created by ChatIndexContainer)
in div (created by ChatIndexContainer)
in div (created by ChatIndexContainer)
in ChatIndexContainer (created by Connect(ChatIndexContainer))
in Connect(ChatIndexContainer) (created by RouterContext)
in RouterContext (created by Router)
in Router (created by App)
in App
in Provider

Насколько я понимаю, причиной этой проблемы является версия react-router.Я использую "react-router": "~3.2.0" и "react-router-dom": "^4.2.2", но я должен использовать как минимум 4.0.0.После того, как я обновил его полностью, мое приложение реакции завислоЕсть ли другие решения, чтобы решить эту ошибку и остаться с текущей react-router версией?

Вот компонент, который создает эту ошибку:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import * as chatActions from '../actions/chats';
import MessageTile from '../components/MessageTile';

 class ChatIndexContainer extends Component {
   constructor(props) {
     super(props);
   }

   render() {
    return(
      <div>
       <div className="links">
        <ul>
        <li>
          <Link to={`/chats`}></Link>
        </li>
      </ul>
    </div>
    <div className="tabs">
      <Switch>
        <Route path={`/chats/:chatId`} component={MessageTile} />
      </Switch>
    </div>
  </div>
  )
 }
}

export default connect(
  state => ({
   chats: state.chats
  }),
  chatActions
)(ChatIndexContainer);

Answer 1

Ваши компоненты Link и Route должны присутствовать в BrowserRouter, HashRouter или Router, предоставляемых с компонентами пользовательской истории

class ChatIndexContainer extends Component {
   constructor(props) {
     super(props);
   }

   render() {
    return(
        <BrowserRouter>
           <div>
               <div className="links">
                <ul>
                <li>
                  <Link to={`/chats`}></Link>
                </li>
              </ul>
            </div>
            <div className="tabs">
              <Switch>
                <Route path={`/chats/:chatId`} component={MessageTile} />
              </Switch>
            </div>
          </div>
        </BrowserRouter>  
      )
   }
}

export default connect(
  state => ({
   chats: state.chats
  }),
  chatActions
)(ChatIndexContainer);