react js中未定义'Navlink'[关闭]答案

【问题标题】：'Navlink' is not defined in react js [closed]react js中未定义'Navlink'[关闭]
【发布时间】：2021-09-26 20:02:10
【问题描述】：

我正在使用 react-router。请看看我的代码 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;

一切正常。但我想将链接添加到我的 home.jsx 并将这一行添加到 Home.jsx

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

显示错误

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.

当我使用锚标记时，它工作正常，但页面重新加载。我不想重新加载页面。

任何帮助将不胜感激。谢谢。

【问题讨论】：

我觉得有错别字，应该是NavLink而不是Navlink

标签： javascript reactjs react-router react-navigation react-link

【解决方案1】：

您导入NavLink 并使用Navlink。

您的contact me 代码应为： <NavLink path="/plans">contact me</NavLink>

【讨论】：

我都试过了，但都不行

【解决方案2】：

它应该是大写 L 的 NavLink 而不是 Navlinks 并且使用“to”而不是“path”

【讨论】：

【解决方案3】：

我终于找到了解决方案。应将以下行添加到我们正在使用该组件的特定文件中。

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

【讨论】：