React.js无法从其他文件导入简单变量问题求助

我的问题 #

我是React新手，现在卡在了文件间变量导入的问题上，主文件App.js的第3行好像有问题，没法成功从nav-links.js导入navLinks变量。

我的App.js代码：

import React, {Component} from "react"; 
import NavMenu from "./components/nav-menu"; 
import navLinks from "/components/nav-links"; 
export default class App extends Component { 
  constructor() { 
    super(); 
    this.state = { navLinks: navLinks } 
  } 
  render() { 
    return ( 
      <div id="container"> 
        <NavMenu navLinks={this.state.navLinks} /> 
      </div> 
    ); 
  } 
}

nav-links.js代码：

import React from 'react';
export const navLinks = [
  { name: "home", href: "/" },
  { name: "subs", href: "/subs" }
];

另外想请教下，我用这种方式（通过props传递链接数组渲染导航菜单的a标签）是否合理？

问题解答 #

首先来说导入的错误：

• 路径错误：你在App.js里写的import navLinks from "/components/nav-links";是绝对路径（以/开头），在React项目里，这种写法会指向项目根目录之外的路径，显然不对。正确的路径应该和导入NavMenu一致，用相对路径：如果App.js在src目录下，nav-links.js在src/components里，那应该写成import { navLinks } from "./components/nav-links";
• 导入方式不匹配：你在nav-links.js里用的是export const navLinks（命名导出），但App.js里用的是默认导入import navLinks from ...，这两种方式不兼容。你有两种修改方案：
  1. 把nav-links.js改成默认导出：

     import React from 'react';
     const navLinks = [
       { name: "home", href: "/" },
       { name: "subs", href: "/subs" }
     ];
     export default navLinks;
     

  2. 在App.js里改用命名导入：import { navLinks } from "./components/nav-links";

然后说导航渲染的合理性：
这种通过props传递链接数组来渲染导航的方式是非常合理且推荐的！它的优点很突出：

• 代码复用：如果其他页面也需要用到这套导航链接，直接导入数组即可，无需重复编写
• 易于维护：要修改、新增或删除导航项，只需要改动nav-links.js这一个文件，不用去修改渲染组件的代码
• 可扩展性：后续如果要给导航项添加图标、权限控制等属性，只需要在数组里补充对应字段，再在NavMenu组件里做逻辑处理就行

还有个小优化建议：如果你的导航链接不会动态变化，其实没必要把它放到组件的state里，直接在render里使用导入的navLinks即可，省去state赋值的步骤：

render() { 
  return ( 
    <div id="container"> 
      <NavMenu navLinks={navLinks} /> 
    </div> 
  ); 
}

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