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

Question

我正在尝试将组件从一个路由到另一个，我收到与反应路由器链接相关的错误，反应路由器的错误是 - 我尝试使用反应路由器并将其包添加到我的项目库中。

这是我为执行该路线而制作的代码：-
1) [Index.js 文件][2]
2) [Navlink.js 文件][3]
3) [nav.js 文件][4]

在 Index.js 中，我在渲染方法中创建了一个路由器，但它显示了上面的错误。
在 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>

Answer 1

我希望您正在使用

react-router

4x。在这些新版本中，您必须从

Link

导入

react-router-dom

。

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

您可以在这里查看相同内容https://reacttraining.com/react-router/web/api/Link。

但我希望您正在遵循一些教程或仍在使用

react-router

3.x 风格。所以要么你必须使用正确版本的

react-router

，要么根据版本遵循正确的写作风格。

Answer 2

使用这个：

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

在包含

<Link>

 的地方包含 

Routes

Answer 3

import {BrowserRouter, Routes, Route} from 'react-router-dom'    

您的

<BrowserRouter></BrowserRouter

中的 Route Navlink.jsx 必须由

BrowserRouter

 中的 

App.jsx

包裹

import { BrowserRouter } from 'react-router-dom'
    
       render(
      <BrowserRouter> 
        <Navlink.jsx/> **like this inside BrouserRouter**
        <App />
      </BrowserRouter>,
      document.getElementById('root')
    )

不要忘记

import { Link } from 'react-router-dom

中的

Navlink.jsx

Answer 4

如果您遇到以下错误：

“组件中发生上述错误：”

和：

“未捕获错误：链接是一个 void 元素标签，既不能有

children

也不能使用

dangerouslySetInnerHTML

。”

然后检查链接是否导入，以及您的链接元素是否为

<Link>

（不是小写

<link>

）。