リンクに関連するReact Router Error

Question

コンポーネントを1つずつルーティングしようとしていますが、反応ルータのリンクに関連するエラーが発生しています。リアクタのエラーが表示されます。Failed to compile反応ルータを使用して試しました。私のプロジェクトライブラリにそのパッケージ。ここ

は用のコードが何であるか、私はルートを行うために作られた： -
1）[Index.jsファイル] [2]
2）[Navlink.jsファイル] [3]
3）[NAVを.jsファイル] [4]

Index.jsで私はレンダリング方法でルータを作ったが、上記のエラーを示している。
Navlink.jsではリンクとすべてのプロパティを提供するリンクリターンクラスを作成しました。
nav.jsファイルでは、navlinkをimport navlink.jsファイルで使用しました。 しかし、エラーは反応ルータには存在しませんし、反応ルータにはhashHistoryが存在しません。

もし誰かが助けてください。

1）Index.js

import React, { Component } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import { Router, Route, hashHistory } from 'react-router'; 
 
import './index.css'; 
 
import App from './App'; 
 
import Homecontent from './homepage'; 
 
import Foo from './footer'; 
 
import registerServiceWorker from './registerServiceWorker'; 
 
import ourAdvantages from './ouradvantage'; 
 
import LoginForm from './loginform'; 
 
import BoRegistration from './boregistration'; 
 
import VoRegistration from './voregistration'; 
 

 
ReactDOM.render(<App />, document.getElementById('header')); 
 
registerServiceWorker(); 
 
// ReactDOM.render(<Homecontent />, document.getElementById('homecontent')); 
 
ReactDOM.render((
 
    <Route path="/" component={App}> 
 
     <Route path="/loginform" component={LoginForm}> 
 
     </Route> 
 
    </Route> 
 
), document.getElementById('homecontent')) 
 
//ReactDOM.render(<LoginForm />, document.getElementById('loginform')); 
 
//ReactDOM.render(<BoRegistration />, document.getElementById('boRegistration')); 
 
//ReactDOM.render(<VoRegistration />, document.getElementById('voRegistration')); 
 
//ReactDOM.render(<ourAdvantages />, document.getElementById('ouradvantages')); 
 
ReactDOM.render(<Foo />, document.getElementById('footer'));

2）navLink.js

import React from 'react' 
 
import { Link } from 'react-router' 
 

 
export default React.createClass({ 
 
    render() { 
 
    return <Link {...this.props} activeClassName="active"/> 
 
    } 
 
})

3）は

をnav.js

class NavMenu extends Component { 
 
    render(){ 
 
    return (
 
     <ul className="navbar-nav"> 
 
     <li className="nav-item"> 
 
     <navLink to="/loginform/reactjs/react-router"><a className="nav-link" href="#">Home</a></navLink> 
 
     </li> 
 
     <li className="nav-item"> 
 
     <a className="nav-link" href="#">Our Advantages</a> 
 
     </li> 
 
     <li className="nav-item"> 
 
     <a className="nav-link" href="#">Offers</a> 
 
     </li>

Answer 1

私はあなたがreact-router 4倍を使用している願っています。これらの新しいバージョンではLinkをreact-router-domからインポートする必要があります。

import { Link } from 'react-router-dom'; 

ここでも確認できますhttps://reacttraining.com/react-router/web/api/Link。

しかし、あなたはチュートリアルに従っているか、まだreact-router 3.xスタイルを使用していることを願っています。そのため、正しいバージョンのreact-routerを使用するか、バージョンに応じて正しいスタイルの書き込みを行う必要があります。