React Router中的Link To相关错误

Question

React Router中的Link To相关错误

6

我正在尝试将组件从一个路由到另一个路由，但出现与React Router链接相关的错误，React Router的错误为 - 编译失败。我已经尝试使用React Router并将其包添加到我的项目库中。

以下是我为路由制作的代码：
1）[Index.js文件][2]
2）[Navlink.js文件][3]
3）[nav.js文件][4]

在Index.js中，我在render方法中创建了一个路由，但会显示以上错误。
在Navlink.js中，我创建了一个链接返回类来提供链接和所有属性。
在nav.js文件中，我通过导入navlink.js文件来使用navlink。但是错误仍然有关链接不存在于React Router中，以及hashHistory在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

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

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

3) 导航栏.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>

- Husain Khanbahadur

你的 react-router 版本是什么？ - Panther

1

@Panther，你能给我检查React Router版本的终端命令吗？ - Husain Khanbahadur

npm ls react-router 应该会给你 react-router 的版本。npm ls 会列出所有模块及其版本。 - Panther

1

React Router 的版本是 react-router@4.2.0 @Panther。 - Husain Khanbahadur

3个回答

1

使用这个：

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

在包含Routes的地方，添加<Link>

- Unknown

-1

如果你遇到了错误：

1. "上述错误发生在组件中："

以及

2. "未捕获的错误：链接是一个空元素标签，既不能有children也不能使用dangerouslySetInnerHTML。"

那么：

请检查链接是否正确，并且您的链接元素是<Link>（而不是小写的<link>）。

- Ankit Kumar

答案含有写作错误。请考虑修正以使答案更清晰。 - LeoVen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Panther · Accepted Answer

我希望你正在使用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版本或根据版本按正确的编写样式进行操作。