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>

@Panther can you give me the terminal command for checking react router version ? — Husain Khanbahadur
npm ls react-router should give you react-router version. npm ls would list all modules and its version. — Panther

Panther Panther · Accepted Answer · 2017-09-04T13:32:45

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.

React Router Error related to Link To

1 Answers