2017-05-30 8 views
0

動作しないリアクトルータを反応させるのが、私はそのアプリを起動しようとすると、私は、コンソールに2つのエラーを取得:は、ルーターが私はシンプルなアプリを構築してい

  1. に必要とされる小道具historyがマークされていますRouterですが、その値はundefinedです。

  2. が未定義

のプロパティlocationを読み取ることができません。これは私のコードです:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Route, Router, IndexRoute, hashHistory} = require('react-router'); 
var Main = require('Main'); 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Main} /> 
    </Router>, 
    document.getElementById('app') 
); 

とpackage.jsonファイル:

{ 
    "name": "boilerplate", 
    "version": "1.0.0", 
    "description": "Simple React App", 
    "main": "ext.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Milad Fattahi", 
    "license": "ISC", 
    "dependencies": { 
    "express": "^4.15.3", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-router": "^4.1.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.5.1", 
    "babel-loader": "^6.2.2", 
    "babel-preset-es2015": "^6.5.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.24.1", 
    "webpack": "^1.12.13" 
    } 
} 

を編集:

私はreact-router-domをインストールし、私のコードの3行目をこれに変更しましたが、何も変わりませんでした。 V4と

var {Route, Router, Link} = require('react-router-dom'); 
+1

あなたは** react router v4 **を使用していますが、これは完全に変更されています。あなたが書いたやり方は古いバージョンのものです、 'react-router-dom'を使ってください。詳細はこちらをご覧ください:https://reacttraining.com/react-router/web/guides/quick-start –

答えて

2

、あなたも反応ルータ-DOMをインポートする必要があるかもしれません。私はテストしていませんが、これはうまくいくはずです。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter, Route,IndexRoute, hashHistory } from 'react-router-dom' 
var Main = require('Main'); 


ReactDOM.render(
<Router history={hashHistory}> 
    <Route path="/" component={Main} /> 
</Router>, 
document.getElementById('app') 
); 

また、v4では、「react-router」をインポートする必要はありません。 'react-router-dom'これを実行します。

+0

私はRouterRouterをRouterとして定義しました。出来た。ありがとう。 –

関連する問題