'Navlink' is not defined in react js-CodePudding

I am working with react-router. Please have a look on my code index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import Home from './components/Home';
import Services from './components/Services';
import Plans from './components/Plans';


import Navigation from './Navigation';

import Contact from './App2';

import reportWebVitals from './reportWebVitals';
// import browserHistory  from 'react-router';
import {IndexRoute,browserHistory} from 'react-router';
import { BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom';
import { NavLink } from 'react-router-dom';



ReactDOM.render(
    <div>
        <Router>
        <div>
        
         <NavLink to="/">Home</NavLink>
          
          <NavLink to="/contact">Contact</NavLink>
          <NavLink to="/services">Sercices</NavLink>
          <NavLink to="/plans">Plans</NavLink>
        <Switch>
         <Route path="/" component={Home} exact/>
         
         <Route path="/contact" component={Contact}/>
         <Route path="/plans" component={Plans}/>
         <Route path="/services" component={Services}/>

        <Route component={Error}/>
       </Switch>
         </div> 
        </Router>

    </div>
  ,
  document.getElementById('roots')
);

home.jsx

import React from 'react';
const Home=()=>{
    return(
        <div>
            <h1>Hello world</h1>
            <p>This is home page</p>
            
        </div>
    );
}
export default Home;

every thing works fine. But i want to add links to my home.jsx and added this line to Home.jsx

<NavLink path="/plans">contact me</NavLink>

it show error

Failed to compile
src\components\Home.jsx
  Line 7:5:  'Navlink' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

when i use anchor tag it works fine but page relaod. I don't wanna reload page.

Any help would be highly appreciated. Thanks.

CodePudding user response：

You import NavLink and use Navlink.

Your contact me code should be: <NavLink path="/plans">contact me</NavLink>

CodePudding user response：

It should be NavLink with capital L not Navlinks and use "to" not "path"

CodePudding user response：

finally i found solution. following line should be added to that particular file in which we are using that component.

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