BrowserHistory wird nie in ReactJS

Question

initialisiert Ich bin sehr neu zu ReactJS. Ich habe versucht, einige Tutorials zu tun, Routing aber am Ende mit Fehlern, wo die "browserHistory" undefiniert war. Der Code und die Fehlermeldung ist wie folgt.

main.js

'use strict'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, IndexRoute, hashHistory,browserHistory} from 'react-router'; 
import App from './App.jsx'; 
import {Home,About,Contact} from './App.jsx'; 


ReactDOM.render((
    <Router history = {browserHistory}> 
     <Route path = "/" component = {App}> 
     <IndexRoute component = {Home} /> 
     <Route path = "home" component = {Home} /> 
     <Route path = "about" component = {About} /> 
     <Route path = "contact" component = {Contact} /> 
     </Route> 
    </Router> 

), document.getElementById('app')) 

Fehlermeldung von Browser-Konsole

Warnung: Fehler prop Typ: Die Stütze history markiert ist, wie in Router erforderlich, aber sein Wert ist undefined .in Router

Bitte lassen Sie mich wissen, ob die Umsetzung out-of-date ist oder wenn ich alle Bibliotheken verpassten dieses Problem

Answer 1

Ich denke, Gesicht ich den Grund gefunden haben, die neuen reagieren-Router nicht browserHistory mehr unterstützt . Um das gleiche Ziel zu erreichen, habe ich den folgenden Code verwendet.

import createBrowserHistory from 'history/createBrowserHistory'; 

const history = createBrowserHistory(); 

Answer 2

Können Sie versuchen useRouterHistory:

import { useRouterHistory } from 'react-router'; 
import createBrowserHistory from 'history/lib/createBrowserHistory'; 

const createAppHistory = useRouterHistory(createBrowserHistory); 

const history = createAppHistory({ 
parseQueryString: parse, 
stringifyQuery: stringify 
}) 

<Router history={history}/> 

Answer 3

Reagieren Router v4 Dinge geändert. Sie haben separate Top Level Router-Elemente erstellt. Ersetzen Sie <Router history={hashHistory}> durch <HashRouter> in Ihrem Code.

import {HashRouter,Route} from 'react-router-dom'; 

<HashRouter> 
    <Route path = "/" component = {App} /> 
</HashRouter>