Estoy trabajando con react-router. Por favor, eche un vistazo a mi código 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') );

inicio.jsx

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

todo funciona bien. Pero quiero agregar enlaces a mi home.jsx y agregué esta línea a Home.jsx

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

muestra 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.

cuando uso la etiqueta de anclaje, funciona bien, pero la página se relaja. No quiero recargar la página.

Cualquier ayuda sería muy apreciada. Gracias.