反应与链接到相关的路由器错误 [英] React Router Error related to Link To

问题描述

我正在尝试将组件从一个路由到另一个，我收到与 react 路由器链接相关的错误，react 路由器的错误是 - 编译失败 我曾尝试使用 react router 并将其包添加到我的项目库中.

I am trying to route the components from one to another, i am getting errors related to the react router link and the error for the react router is - Failed to compile i have tried using react router and added its package to my project library.

这里是我为做路线所做的代码:-
1) [Index.js 文件][2]
2) [Navlink.js 文件][3]
3) [nav.js 文件][4]

here are code for the what i made for doing the route:-
1) [Index.js file][2]
2) [Navlink.js file][3]
3) [nav.js file][4]

在 Index.js 中，我在渲染方法中创建了一个路由器，但上面显示错误.
在 Navlink.js 中，我创建了一个提供链接和所有属性的链接返回类.
在 nav.js 文件中，我通过导入 navlink.js 文件使用了 navlink.但是与该链接相关的错误不断出现在反应路由器中，并且 hashHistory 不存在于反应路由器中.

In Index.js i have made a router in render method but it shows errors above.
In Navlink.js i have made a link return class which provide the link and all properties.
In nav.js file i have used the navlink by import navlink.js file. but the errors keeps coming related to that link does'nt exist in react router and hashHistory does'nt exist in react router.

如果有人知道请帮忙.

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

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>

推荐答案

我希望你使用 react-router 4x.在这些新版本中，您必须从 react-router-dom 导入 Link.

I hope you are using react-router 4x. In these new version you have to import Link from react-router-dom.

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

您可以在这里查看相同的内容 https://reacttraining.com/react-router/网页/api/链接.

You can check the same here https://reacttraining.com/react-router/web/api/Link.

但我希望你正在学习一些教程或仍在使用 react-router 3.x 风格.所以要么你必须使用正确版本的 react-router 或者根据版本遵循正确的写作风格.

But i hope you are following some tutorial or still using react-router 3.x style. So either you have to use correct version of react-router or follow the correct style of writing according to the version.

这篇关于反应与链接到相关的路由器错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！