Question

我不确定自己在做什么错。我直接从react-bootstraps官方页面粘贴了此示例代码，但无法正常工作。奇怪的是，一旦删除代码中的Nav.Link行，一切都将正常工作。为什么我不能渲染Nav.Link？

这是我的代码（App.js）

import React, { Component } from 'react';
import Button from 'react-bootstrap/lib/Button';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import Form from 'react-bootstrap/lib/Form';
import FormControl from 'react-bootstrap/lib/FormControl';

Api说我应该使用

import Button from 'react-bootstrap/Button'

代替

import Button from 'react-bootstrap/lib/Button';

但是当我这样做时，它根本找不到文件，并给了我错误

Failed to compile.

./src/App.js 
Module not found: Can't resolve 'react-bootstrap/Button' in '/Users/xxx/repos/admin-ui/application/src'

渲染功能（直接从this react-bootstrap example获取）

return (
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
          </Nav>
          <Form inline>
            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
            <Button variant="outline-success">Search</Button>
          </Form>
        </Navbar.Collapse>
      </Navbar>
    );

这是我得到的错误。错误触发的行47和48是Nav.Link行。

Answer 1

虽然很难确切地知道您的代码和设置，但我的猜测是您使用的react-bootstrap版本早于1.0.0- 也许您使用的是0.32.4或更早的版本？这是我的猜测，因为：

Nav.Link直到1.0.0及更高版本才引入软件包中。
在1.0.0之前，导入组件的方法是从lib子文件夹导入（例如：import Button from 'react-bootstrap/lib/Button）。从1.0.0开始，您将根据其当前文档进行导入：import Button from 'react-bootstrap/Button。

因此，我的猜测是您使用的是旧版本的react-bootstrap 。

在第47和48行，您尝试访问<Nav.Link>，但没有这样的事情（在您使用的软件包的版本中）。您可以将render代码更改为使用<Nav.Nysithea>（例如），并且会得到完全相同的错误消息。

这是我创建的code sandbox，它使用您的代码并复制与您在<Nav.Link>行中看到的错误相同的错误。如果删除这些行，则会加载页面。

在该代码沙箱中，我添加了react-bootstrap版本的0.32.4依赖项。如果要将该依赖项版本更改为最新版本（当前为1.0.0-beta.5）并从所有/lib语句中删除import子文件夹，则页面将加载，并且<Nav.Link>可以访问。

要在引入react-bootstrap之前确认使用的是Nav.Link版本，可以在命令行中执行以下操作：

npm show react-bootstrap
# OR
yarn list react-bootstrap

您使用的是哪个版本的软件包？

如果在1.0.0之前，并且您想要使用Nav.Link，那么我建议您执行以下操作：

编辑您的package.json文件，以确保您使用该软件包的最新版本。查找包含react-bootstrap的行。编辑该行，使其如下所示：

    "react-bootstrap": "^1.0.0"

这将确保您正在运行react-bootstrap版1.*

删除您的node_modules文件夹。
运行npm install

在安装所有软件包之后，您可以再次检查react-bootstrap版本（请参见上文）以验证其版本至少为1.0.0。如果是这样，那么您应该可以访问Nav.Link。

在react-bootstrap@1.0.0-beta.5中渲染Nav.Link时出错

1 个答案: