在 NavDropdown 中设置 MenuItem 有一个 link

Question

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

我想要的是每个 <MenuItem>（'API Service #' 按钮）将我发送到不同的 link。我试过稍微调整一下，这是我到目前为止得到的结果：

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 的 link，但随后立即将您转到应用程序的默认页面，即 /dashboard （例如，如果我单击下拉菜单中的 "API Service 3" 按钮，它会将我发送到“#/servicethree”，但随后会立即将我发送回“#/dashboard”）。我很好奇为什么它会将我恢复到默认页面？任何帮助将不胜感激，因为我不太确定如何使这些 MenuItems 具有 link。如有必要，我可以提供更多代码。

编辑：

这是更新后的 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

已找到解决方案。请参阅下面的答案。

Answer 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 组件。从那里，您只需单击 Link 以及指向您定义的 Routes 的匹配 url 路径。

Answer 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;

在 NavDropdown 中设置 MenuItem 有一个 link

Having MenuItem inside NavDropdown have a link

javascript

dashboard

reactjs

react-bootstrap

App.js