Javascript 无法链接到next.js应用程序的index.js（主页）

下面是我已经实现的下一个.js应用程序

当我使用

创建一个组件，并使用

主页

为这些组件提供一个从其他页面返回主页（index.js）的链接时，会遇到一些问题

但当单击按钮时，它无法链接回。出现此错误

404 |无法找到此页面

index.js

与其他文件（如

inventory.js

、

sale.js

、

totalSale.js

等）位于同一个名为“页面”的文件夹中

我还尝试了

和

。但是，它仍然不起作用

我还调用

ButtonBar（）

并将其导入其他页面（.js文件）

这是我的代码：

import Button from 'react-bootstrap/Button';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';
import ButtonGroup from 'react-bootstrap/ButtonGroup';

export default function ButtonBar() {
    return (
      <ButtonGroup>
        <Button href="/index">Home</Button>
        <Button href="/inventory">Inventory</Button>
        <Button href="/sale">Sale</Button>

        <DropdownButton as={ButtonGroup} title="Account" id="bg-nested-dropdown">
            <Dropdown.Item eventKey="1" href="/totalSale">Total Sale</Dropdown.Item>
            <Dropdown.Item eventKey="2" href="/balance">Account Balance</Dropdown.Item>
        </DropdownButton>

        <DropdownButton as={ButtonGroup} title="Notification" id="bg-nested-dropdown">
            <Dropdown.Item eventKey="1" href="/needItem">Need Item</Dropdown.Item>
            <Dropdown.Item eventKey="2" href="/stock">Stock</Dropdown.Item>
        </DropdownButton>

      </ButtonGroup>
   );
}

从“反应引导/按钮”导入按钮；
从“反应引导/下拉按钮”导入下拉按钮；
从“反应引导/下拉”导入下拉列表；
从“react bootstrap/ButtonGroup”导入ButtonGroup；
导出默认函数ButtonBar（）{
返回(
家
库存
特价
总销售额
账户余额
需要物品
股票
);
}

---

我该怎么办？

要导航，您需要从

next/Link

导入

Link

import Link from 'next/link'

像这样使用它

家
“库存”

你可以参考下一个文件