React使用NavLink提示'Navlink' is not defined报错如何解决？

解决方案 #

你现在的编译报错是两个问题导致的，按以下步骤修正即可：

1. 缺少组件导入：NavLink是react-router-dom提供的组件，你只在index.js中导入过，每个使用该组件的文件都需要单独导入
2. 属性与拼写错误：
   • 组件名是大小写敏感的，NavLink的L必须大写，你报错信息里的Navlink就是拼写错误导致识别失败
   • NavLink的跳转目标属性是to，你写的path是<Route>组件用来匹配路由的属性，不能用在链接组件上

修改后的完整Home.jsx代码如下：

import React from 'react';
// 新增导入NavLink
import { NavLink } from 'react-router-dom';
const Home=()=>{
    return(
        <div>
            <h1>Hello world</h1>
            <p>This is home page</p>
            {/* 修正属性为to，组件名大小写正确 */}
            <NavLink to="/plans">contact me</NavLink>
        </div>
    );
}
export default Home;

如果你不需要给激活的链接加特殊样式，也可以用更轻量的Link组件，用法和NavLink完全一致，只需将导入和组件名换成Link即可。

内容的提问来源于stack exchange，提问作者Adnan Nawaz