React Nav 栏中的 onclick 链接不适用于 React Lazy

问题描述

我对所有 JS 页面都使用 React Lazy。

Router 代码的实现是按照这样的：https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

但是链接的 onclick 事件仅在 NAV BAR 中不起作用。

导航条码：

import React,{ Component } from "react";
import {   Navbar,Nav,NavDropdown,Button,InputGroup,} from "react-bootstrap";

class LoadNav extends Component {
  constructor(props) {
    super(props);
  }
render() {
return (
<div>
          <Navbar
            collapseOnSelect
            fixed="top"
            className="load-navbar"
            variant="dark"
            expand="lg"
          >
         <Navbar.Toggle aria-controls="navbar-nav" />
            <Navbar.Collapse id="navbar-nav">
              <Nav className="mr-auto">
                                
                <Nav.Link
                  to="/dashboard"}
                  className="nav-link mr-4"
                  as={Link}
                  eventKey="1"
                > Dashboard</Nav.Link>
             </Navbar.Collapse>
          </Navbar>
        </div>
}

单击仪表板 url 已更改（/dashboard 附加到 url）但页面未加载。它保持在同一页面上。

令人惊讶的是，导航栏中的链接和重定向正在起作用：示例：

<Redirect
          to={{
            pathname: "./RDisplay/",}}
        />

和

 <Link to={"/dashBoard"}>
                    <Button variant="primary">Return Home</Button>
</Link>

问题仅与 React JS 的 Nav 组件有关。

任何人都可以提出建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-lazy-load reactjs reactjs