Javascript 指向PDF的导航栏链接不工作

由于某种原因，我无法让这个简单的PDF链接正常工作。我正在使用react，reactstrap导航栏和引导css。以下是我的问题的一个例子：

我一定错过了一些简单的东西。谢谢你的时间

import React from "react";
import ReactDOM from "react-dom";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import "./styles.css";

function App() {
return (
    <div style={{ width: "100%" }}>
    <Navbar color="dark" dark expand="sm">
        <NavbarBrand href="/">Brand</NavbarBrand>
        <NavbarToggler />
        <Collapse navbar>
        <Nav className="mr-auto" navbar>
            <NavItem>
            <NavLink href="/sample.pdf">
                <span className="fa fa-fw fa-file-pdf" /> PDF
            </NavLink>
            </NavItem>
        </Nav>
        </Collapse>
    </Navbar>
    </div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
进口{
崩溃
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
纳维坦，
导航链接
}从“反应带”；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/styles.css”；
函数App（）{
返回(
烙印
PDF
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您需要删除此url中的点。是否有任何理由需要在pdf链接中包含点？ 例如，这将起作用

 <NavLink href="/sample">

我希望保留文件扩展名，以便浏览器在检索文件时知道如何处理文件。然后我想您需要自定义网页包配置。

 <NavLink href="/sample">