web-dev-qa-db-ja.com

Reactリンク先に関連するルーターエラー

コンポーネントを相互にルーティングしようとしていますが、reactルーターリンクに関連するエラーが発生し、reactルーターのエラーは コンパイルに失敗しました 反応ルーターを使用してみましたが、私のプロジェクトライブラリへのパッケージ。

これが私がルートを行うために作ったもののコードです：-
1）[Index.jsファイル] [2]
2）[Navlink.jsファイル] [3]
3）[nav.jsファイル] [4]

Index.jsで、renderメソッドでルーターを作成しましたが、上記のエラーが表示されます。
Navlink.jsで、リンクとすべてのプロパティを提供するリンクリターンクラスを作成しました。
nav.jsファイルで、navlink.jsファイルをインポートしてnavlinkを使用しました。しかし、そのリンクが反応ルーターに存在せず、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>
reactjsreact-routerreact-router-dom
5
Husain Khanbahadur

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

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

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

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

9
Panther