BrowserHistoryはReactJSで決して初期化されません

Question

私はReactJSを初めてお使いです。私はルーティングを行うためにいくつかのチュートリアルを試していましたが、 "browserHistory"が定義されていないエラーで終わりました。コードとエラーメッセージは次のとおりです。ブラウザのコンソールから

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')) 

エラーメッセージ

警告：失敗した小道具のタイプ： Routerに必要ですが、その値があるとしてhistoryがマークされている小道具undefined .inルーター

実装が古くなっているか、この問題に直面するライブラリが欠けている場合はお知らせください

Answer 1

新しい反応ルータはbrowserHistoryをサポートしていません。同じ目標を達成するために、以下のコードを使用しました。

import createBrowserHistory from 'history/createBrowserHistory'; 

const history = createBrowserHistory(); 

Answer 2

あなたは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

は、ルータv4のは、物事を変え反応します。彼らは別々のトップレベルルータ要素を作った。あなたのコードに<Router history={hashHistory}>を<HashRouter>と置き換えてください。

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

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