Javascript 在NavDropdown中包含MenuItem有链接

我对ReactJS和Bootstrap还比较陌生，所以如果这是一个愚蠢的问题，我很抱歉。我在网上下载了一个模板，我的应用程序导航栏上有一个下拉列表。以下是下拉列表的外观，以供参考：

我想让每个

（“API服务”按钮）将我发送到不同的链接。我已经尝试了一些调整，这就是我目前得到的：

import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";

class AdminNavbarLinks extends Component {
  render() {
    return (
      <div>
        <Nav>
          <NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
            <MenuItem eventKey={2.1} href="/serviceone">
              API Service 1
            </MenuItem>
            <MenuItem eventKey={2.2} href="/servicetwo">
              API Service 2
            </MenuItem>
            <MenuItem eventKey={2.3} href="/servicethree">
              API Service 3
            </MenuItem>
            <MenuItem eventKey={2.4} href="/servicefour">
              API Service 4
            </MenuItem>
            <MenuItem eventKey={2.5} href="/servicefive">
              API Service 5
            </MenuItem>
          </NavDropdown>
        </Nav>
        <Nav pullRight>
          //Other NavDropdowns
        </Nav>
      </div>
    );
  }
}

export default AdminNavbarLinks;

现在是主文件

index.js

：

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import Navbar from "components/Navbars/AdminNavbarLinks.jsx";
import Dashboard from "views/Dashboard.jsx";
import ServiceOne from "views/ServiceOne.jsx";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import AdminLayout from "layouts/Admin.jsx";

ReactDOM.render(
  <BrowserRouter>
    <Navbar />
    <Switch>
      <Route path="/" component={Dashboard} exact />
      <Route path="/serviceone" component={ServiceOne} exact />
    </Switch>
    <Switch>
      <Route path="/admin" render={props => <AdminLayout {...props} />} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Route，Switch，Redirect}；
从“components/Navbars/AdminNavbarLinks.jsx”导入Navbar；
从“views/Dashboard.jsx”导入仪表板；
从“views/ServiceOne.jsx”导入ServiceOne；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/assets/css/animate.min.css”；
导入“/assets/sass/light bootstrap dashboard react.scss？v=1.3.0”；
导入“/assets/css/demo.css”；
导入“/assets/css/pe-icon-7-stroke.css”；
从“layouts/Admin.jsx”导入AdminLayout；
ReactDOM.render(
} />
,
document.getElementById（“根”）
);

编辑#2

---

找到解决方案。见下面我的答案

您需要集成react路由器dom，以便在react应用程序中的组件之间导航

只需将

菜单项

嵌套在

链接

标记中即可。在每个

链接

标记中，使用要导航到的路径定义

to

属性。这将最终显示一个完全不同的组件

import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";

class AdminNavbarLinks extends Component {
  render() {
    return (
      <div>
        <Nav>
          <NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
            <Link to="/serviceone">
               <MenuItem eventKey={2.1}>
                 API Service 1
              </MenuItem>
            </Link>
            ...repeat for others
          </NavDropdown>
        </Nav>
        <Nav pullRight>
          //Other NavDropdowns
        </Nav>
      </div>
    );
  }
}

export default AdminNavbarLinks;

---

在上面，我们为您的应用程序定义了一些非常基本的路由。我假设您的

Navbar

实际上包含

AdminNavbarLinks

组件。从那里，您只需单击一个

链接

，该链接带有与您定义的

路由

匹配的url路径。

。我所做的只是更改了

的一些属性，您使用的是react路由器吗？不，我没有从react路由器导入任何内容。我是说react路由器dom。这就是您需要从一个组件移动到另一个组件的内容：）谢谢。我检查了模板中其他文件中的一些代码，实际上它们使用了“react router dom”

中的

import{…}。我将如何合并
您将MenuItem嵌套在Link标记中。在这里，我将在下面向您展示。我按照您所说的实现了代码，但仍然得到相同的错误，因为它只是立即将我重定向到
/dashboard
页面。我编辑了我的帖子以反映我的代码。我应该在其他地方添加新的
标记吗？@Cizox尝试删除为菜单项定义的href。我的猜测是它仍然被点击。不，现在它根本不会把我发送到网页
import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";

class AdminNavbarLinks extends Component {
  render() {
    return (
      <div>
        <Nav>
          <NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
            <Link to="/serviceone">
               <MenuItem eventKey={2.1}>
                 API Service 1
              </MenuItem>
            </Link>
            ...repeat for others
          </NavDropdown>
        </Nav>
        <Nav pullRight>
          //Other NavDropdowns
        </Nav>
      </div>
    );
  }
}

export default AdminNavbarLinks;

import React from "react"
import { BrowserRouter, Route, Switch } from "react-dom
import Navbar from "whatever path this"
import Home from "./whatever path this"
import ServiceOne from "./whatever path this"

const App = () => {
  return(
     <BrowserRouter>
         <Navbar/>
         <Switch>
            <Route path="/" component={Home} exact/>
            <Route path="/serviceone" component={ServiceOne} exact/>
         </Switch>
     </BrowserRouter>
  )

}

import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";
import { NavLink } from "react-router-dom";

class AdminNavbarLinks extends Component {
  render() {
    return (
      <div>
        <Nav>
          <NavDropdown title="Services" id="basic-nav-dropdown">
            <MenuItem>
             <NavLink
                      to="/admin/serviceone"
                      className="nav-link"
                      activeClassName="active"
                    >
                     API Service 1
                    </NavLink>
            </MenuItem>
            <MenuItem>
             <NavLink
                      to="/admin/servicetwo"
                      className="nav-link"
                      activeClassName="active"
                    >
                     API Service 2
                    </NavLink>
            </MenuItem>
                        <MenuItem>
             <NavLink
                      to="/admin/servicethree"
                      className="nav-link"
                      activeClassName="active"
                    >
                     API Service 3
                    </NavLink>
            </MenuItem>
                        <MenuItem>
             <NavLink
                      to="/admin/servicefour"
                      className="nav-link"
                      activeClassName="active"
                    >
                     API Service 4
                    </NavLink>
            </MenuItem>
                        <MenuItem>
             <NavLink
                      to="/admin/servicefive"
                      className="nav-link"
                      activeClassName="active"
                    >
                     API Service 5
                    </NavLink>
            </MenuItem>
          </NavDropdown>
        </Nav>
        <Nav pullRight>
          //Other NavDropdowns
        </Nav>
      </div>
    );
  }
}

export default AdminNavbarLinks;