React Router Error related to Link To

Question

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.

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]

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.

If anyone Knows Please help.

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

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';

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

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.

Answer 2

If you have these errors:

"The above error occurred in the component:"

and:

"Uncaught Error: link is a void element tag and must neither have children nor use dangerouslySetInnerHTML."

then check that the link is import or not, and if your link element is <Link> (not in lower case <link>).

Answer 3

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

You must be Route Navlink.jsx in <BrowserRouter></BrowserRouter wrapped by a BrowserRouter in your App.jsx

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

dont' forget import { Link } from 'react-router-dom in Navlink.jsx

Answer 4

Use this one:

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

Include <Link> where you include Routes