首页 文章

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

提问于
浏览
1

我试图将组件从一个路由到另一个,我得到与反应路由器链接相关的错误和反应路由器的错误 - Failed to compile我尝试使用反应路由器并将其包添加到我的项目库 .

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

在Index.js中,我在渲染方法中创建了一个路由器,但它显示了上面的错误 .
在Navlink.js中,我创建了一个链接返回类,它提供了链接和所有属性 .
在nav.js文件中,我通过import navlink.js文件使用了navlink . 但是错误一直与反应路由器中存在的链接有关 .

如果有人知道请帮助 .

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>

1 回答

  • 6

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

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

    你可以在这里检查https://reacttraining.com/react-router/web/api/Link .

    但我希望你正在学习一些教程或仍然使用 react-router 3.x风格 . 因此,您必须使用正确版本的 react-router 或根据版本遵循正确的写作风格 .

相关问题