Реагировать на приложение - контекст `router` помечен как обязательный в LinkContainer, но его значение равно undefined - PullRequest
Новая
       28

Реагировать на приложение - контекст `router` помечен как обязательный в LinkContainer, но его значение равно undefined

0 голосов
/ 01 марта 2019

При попытке запустить приложение React я получаю эту ошибку в браузере: 

TypeError: Cannot read property 'history' of undefined

LinkContainer.js
var href = this.context.router.history.createHref(typeof to === 'string' ? {

Консоль показывает эту ошибку: 

The context `router` is marked as required in `LinkContainer`, but its value is `undefined`.

У меня определено <Router>вокруг всего в Index.js и правильно настроить LinkContainers, или я так думаю.Тогда у меня есть только один простой маршрут на данный момент.Я много читал, где его React-Router v4, который вызывает проблемы при работе с LinkContainer в React-Router-Bootstrap, но нет решения для этого в v4, и я должен понизить версию до v3, или я просто что-то упустил здесь, чтобы это разрешитьработать?

Я использую следующие версии пакета: 

"react": "^16.8.3",
"react-bootstrap": "^1.0.0-beta.5",
"react-dom": "^16.8.3",
"react-router": "^4.3.1",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.4.0-beta.6",

У меня есть следующий код:

Index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router><App /></Router>, document.getElementById("root"));

serviceWorker.unregister();

Приложение.js 

import React, { Component } from "react";
import { Navbar, Nav, NavItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import "./App.css";
import Routes from "./Routes";

class App extends Component {
    render() {
      return (
        <div className="App container">
          <Navbar fluid collapseOnSelect>
              <Navbar.Brand>
                <LinkContainer to="/home">
                    <NavItem>Ness</NavItem>
                </LinkContainer>
              </Navbar.Brand>
              <Navbar.Toggle />
            <Navbar.Collapse>
              <Nav pullRight>
                <LinkContainer to="/signup">
                  <NavItem>Signup</NavItem>
                </LinkContainer>
                <LinkContainer to="/login">
                  <NavItem>Login</NavItem>
                </LinkContainer>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
          <Routes />
        </div>
      );
    }
}

export default App;

Routes.js 

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () => 
    <Switch>
        <Route path="/home" component={Home} />
    </Switch>;
...