与链接相关的React路由器错误

Question

我正在尝试将组件从一个到另一个方面，我会收到与React Router链接相关的错误，并且React Router的错误是 - 无法编译我尝试使用React尝试使用React路由器并将其包装添加到我的项目库中。

这是我为执行路线所做的代码： -
1）[index.js文件] [2]
2）[navlink.js文件] [3]
3）[nav.js文件] [4]

在index.js中，我在渲染方法中制作了一个路由器，但在上面显示错误。
在navlink.js中，我完成了一个链接返回类，该类提供链接和所有属性。
在nav.js文件中，我使用了导入navlink.js文件的navLink。但是，错误在React路由器中不存在该链接并不存在于React路由器中。

不存在。

如果有人知道，请提供帮助。

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 4X。在这些新版本中，您必须从react-router-dom导入Link。

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

您可以在此处检查相同

，但我希望您遵循一些教程或仍使用react-router 3.x样式。因此，您必须使用正确版本的react-router版本，或者按照版本遵循正确的写作风格。

Answer 2

使用此：

import { Link, Route, Routes } from "react-router-dom";

包括 <Link>，其中包括 Routes

Answer 3

如果您有Erroe是

1 _＆quot上述错误发生在组件中：'

和

2_; quot offruck错误：链接是一个无效元素标签，不得具有children也不使用dangerouslySetInnerHTML。

然后： -

请参阅链接是否导入，您的链接元素是<Link>（不在小型情况下<link>）