2017-06-24 7 views
2

私はreact-router v4を学習しており、簡単なアプリケーションの作成を試みました。私はcreate-react-app cliを使ってReactアプリを作った。 マイroutes.jsファイル:未定義のプロパティ 'history'を読み取ることができません

import React from 'react'; 
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; 

import Home from '../components/Home'; 
import ContentOne from '../components/ContentOne'; 
import ContentTwo from '../components/ContentTwo'; 

const routeConfig = [ 
    { path: '/', 
    exact: true, 
    component: Home 
    }, 
    { path:'/home', 
    component:Home 
    }, 
    { path: '/contentOne', 
    component: ContentOne 
    }, 
    { path: '/contentTwo', 
    component: ContentTwo 
    } 
] 

const Routes =() => { 
    return (
     <Router> 
     <Switch> 
     {routeConfig.map((route, index) => { 
      <Route path = {route.path} component = {route.component} exact = {route.exact} /> 
     })} 
     </Switch> 
     </Router> 
    ); 
} 
export default Routes; 

App.jsファイル:

import React, {Component} from 'react'; 

import './App.css'; 
import SideNav from './components/SideNav'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <SideNav /> 
     <div> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

Index.jsファイル:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import Routes from './routes/Routes.js'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 

ReactDOM.render(
<App> 
<Routes /> 
</App>, document.getElementById('root')); 
registerServiceWorker(); 

私は財産を読むことができません」というエラーを取得したアプリケーションを実行しようとするの歴史'の未定義 "。私はデバッグを試みましたが、どこに問題があるのか​​正確に把握できませんでした。誰かが私に間違っていると私に示唆することができますか? Linkに必要に応じて

コンテキストrouterがマークされているが、その値はundefinedです:

は、私は、コンソールに次のエラーがあります。

+0

内{歴史}を追加してみてください –

答えて

-1

あなたがいることを追加することができ、正確にあなたがリンクを使用しているBrowserRouter =>
import {BrowserRouter as Router, Route, Switch, history} from 'react-router-dom';

関連する問題