Reaktor routera nie powiodło się "historia", jest niezdefiniowany.

Question

Podążałem za tutorialem Tylera Mcginsnisa i trafiłem na ratunek routerowi reagowania, w szczególności z historią. Skończyło się kopiując jego kod verbatim po prostu zobaczyć, czy to tylko ja, ale ja wciąż się

Warning: React.createElement: type is invalid -- expected a string (for built- 
in components) or a class/function (for composite components) but got: 
undefined. You likely forgot to export your component from the file it's 
defined in. 

Warning: Failed prop type: The prop `history` is marked as required in 
`Router`, but its value is `undefined`. in Router 

Uncaught TypeError: Cannot read property 'location' of undefined 
at new Router (index_bundle.js:8347) 
at index_bundle.js:19079 
at measureLifeCyclePerf (index_bundle.js:18859) 
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (index_bundle.js:19078) 
at ReactCompositeComponentWrapper._constructComponent (index_bundle.js:19064) 
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:18972) 
at Object.mountComponent (index_bundle.js:4070) 
at ReactCompositeComponentWrapper.performInitialMount (index_bundle.js:19155) 
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:19042) 
at Object.mountComponent (index_bundle.js:4070) 

Realizacja jest:

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var hashHistory = ReactRouter.hashHistory; 
var IndexRoute = ReactRouter.IndexRoute; 
var Main = require('../components/Main'); 
var Home = require("../components/Home"); 
var PromptContainer = require('../containers/PromptContainer'); 

var routes = (
    <Router history={hashHistory}> 
    <Route path='/' component={Main}> 
     <IndexRoute component={Home} /> 
     <Route path='playerOne' header='Player One' component={PromptContainer} /> 
     <Route path='playerTwo/:playerOne' header='Player Two' component={PromptContainer} /> 
    </Route> 
    </Router> 
); 

module.exports = routes; 

Co zauważyłem było to, że nie istnieje hashHistory w module react-router, ale raczej jest createBrowserHistory wewnątrz modułu history. Po doc API znalazłem, pomyślałem muszę nazwać tamtędy jak:

var BrowserHistory = require('history/createBrowserHistory); 
const history = createBrowserHistory(); 

Doing która produkuje błąd createBrowserHistory is not a function. Usunięcie parantez, powoduje te same błędy, co powyżej, stwierdzając, że historia to undefined.

Kiedy loguję historię, jest ona z pewnością niezdefiniowana, co sugeruje, że problem związany jest z instrukcją importu, ale czy konsola nie mogłaby mi znaleźć ReactRouter.hashHistory?

Rozumiem, że ten samouczek ma ponad rok i prawdopodobnie nastąpiły zmiany w interfejsie API, których po prostu nie znam i na tym polega mój problem. Każda pomoc jest doceniana!

Answer 1

Router v4 jest trochę inna

HashHistory

import { HashRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App'; 

render(( 
    <Router> 
    <Route exact path="/" component={App} /> 
    </Router>), 
document.getElementById('root')); 

lub BrowserHistory

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App'; 

render(( 
    <Router> 
    <Route exact path="/" component={App} /> 
    </Router>), 
document.getElementById('root')); 

Answer 2

var BrowserHistory = require('history/createBrowserHistory'); 
const history = createBrowserHistory(); 

czy masz na myśli var createBrowserHistory = require...?

również, wygląda createBrowserHistory jest teraz (w v3) znajduje się w history/lib/createBrowserHistory

Jeśli to nie zadziała - jaka wersja react-router używasz?