在 NavDropdown 中有 MenuItem 有一个链接答案

【问题标题】：Having MenuItem inside NavDropdown have a link在 NavDropdown 中有 MenuItem 有一个链接
【发布时间】：2019-12-14 17:37:03
【问题描述】：

我对 ReactJS 和 Bootstrap 还很陌生，所以如果这是一个愚蠢的问题，我深表歉意。我在线下载了一个模板，我的应用程序的导航栏中有一个下拉菜单。作为参考，下拉列表如下所示：

我想要每个<MenuItem>（“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;

此代码当前所做的是将您发送到与每个href 对应的链接，然后立即将您发送到应用程序的默认页面，即/dashboard（例如，如果我单击“ API 服务 3”按钮，它会将我发送到“#/servicethree”，然后立即将我发送回“#/dashboard”）。我很好奇为什么它将我恢复到默认页面？任何帮助将不胜感激，因为我不太确定如何使这些 MenuItems 具有链接。如有需要，我可以提供更多代码。

编辑：

这是更新后的AdminNavbarLinks 文件：

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

class AdminNavbarLinks extends Component {
  render() {
    return (
      <div>
        <Nav>
          <NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">

            <Link to="/serviceone">
              <MenuItem eventKey={2.1} href="/serviceone">
                API Service 1
              </MenuItem>
            </Link>
            <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")
);

编辑#2

找到解决方案。请看下面我的回答。

【问题讨论】：

你在用 react-router 吗？
不，我没有从 React Router 导入任何东西
对不起，我的意思是 react-router-dom。这就是你需要从一个组件到另一个组件的实际移动:)
谢谢。我检查了模板中其他文件中的一些代码，它们确实使用了import { ... } from "react-router-dom"。我如何在<MenuItems> 中加入<Link to= 标签？再一次，我只是在学习 Bootstrap 和 ReactJS，所以我仍在尝试找出正确放置 jsx 标记的位置。
您可以将 MenuItem 嵌套在 Link 标记内。下面我就给大家介绍一下。

标签： javascript reactjs dashboard react-bootstrap

【解决方案1】：

您需要集成 react-router-dom 以在您的 React 应用程序中跨组件导航。

只需将MenuItems 嵌套在Link 标记中。在每个 Link 标记中，您可以使用要导航到的路径来定义 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;

您还必须在主应用程序中定义 Routes 才能完成配置。

这样就足够了：

App.js

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>
  )

}

在上面我们为您的应用定义了一些非常基本的路由。我假设你的 Navbar 实际上里面有 AdminNavbarLinks 组件。从那里您只需单击带有匹配 url 路径的 Link 到您定义的 Routes。

【讨论】：

我按照你说的实现了代码，但我仍然遇到同样的错误，它只是立即将我重定向到/dashboard 页面。我编辑了我的帖子以反映我拥有的代码。我应该在其他地方添加新的<Route> 标签吗？
@Cizox 尝试删除您为 MenuItem 定义的 href。我的猜测是它仍然被点击。
不，现在它根本不会将我发送到网页

【解决方案2】：

我终于让它工作了。我所做的只是更改<Link to 标签的一些属性。这是AdminNavbarLinks 现在的样子：

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;

【讨论】：