React.js：如何在单击菜单时重定向到另一个页面？

Question

我在路由页面中正在调用侧面导航

侧面导航正常，但是，我想在单击菜单项后重定向到另一页

就像<NavLink to="/">中发生的事情>>

Sidebar.js

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Divider from "@material-ui/core/Divider";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
import Collapse from "@material-ui/core/Collapse";
import logo from "../assets/sbc-logo.png";

function SidebarItem({ depthStep = 10, depth = 0, expanded, item, ...rest }) {
  const [collapsed, setCollapsed] = React.useState(true);
  const { label, items, Icon, onClick: onClickProp } = item;

  function toggleCollapse() {
    setCollapsed(prevValue => !prevValue);
  }

  function onClick(e) {
    if (Array.isArray(items)) {
      toggleCollapse();
    }
    if (onClickProp) {
      onClickProp(e, item);
    }
  }

  let expandIcon;

  if (Array.isArray(items) && items.length) {
    expandIcon = !collapsed ? (
      <ExpandLessIcon
        className={
          "sidebar-item-expand-arrow" + " sidebar-item-expand-arrow-expanded"
        }
      />
    ) : (
      <ExpandMoreIcon className="sidebar-item-expand-arrow" />
    );
  }

  return (
    <>
      <ListItem
        className="sidebar-item"
        onClick={onClick}
        button
        dense
        {...rest}
      >
        <div
          style={{ paddingLeft: depth * depthStep }}
          className="sidebar-item-content"
        >
          {Icon && <Icon className="sidebar-item-icon" fontSize="small" />}
          <div className="sidebar-item-text">{label}</div>
        </div>
        {expandIcon}
      </ListItem>
      <Collapse in={!collapsed} timeout="auto" unmountOnExit>
        {Array.isArray(items) ? (
          <List disablePadding dense>
            {items.map((subItem, index) => (
              <React.Fragment key={`${subItem.name}${index}`}>
                {subItem === "divider" ? (
                  <Divider style={{ margin: "6px 0" }} />
                ) : (
                  <SidebarItem
                    depth={depth + 1}
                    depthStep={depthStep}
                    item={subItem}
                  />
                )}
              </React.Fragment>
            ))}
          </List>
        ) : null}
      </Collapse>
    </>
  );
}

function Sidebar({ items, depthStep, depth, expanded }) {
  return (
    <div className="sidebar-fixed position-fixed">
    {<a href="#!" className="logo-wrapper waves-effect">
        <img alt="MDB React Logo" className="img-fluid" src={logo}/>
    </a>}
      <List disablePadding dense>
        {items.map((sidebarItem, index) => (
          <React.Fragment key={`${sidebarItem.name}${index}`}>
            {sidebarItem === "divider" ? (
              <Divider style={{ margin: "6px 0" }} />
            ) : (
              <SidebarItem
                depthStep={depthStep}
                depth={depth}
                expanded={expanded}
                item={sidebarItem}
              />
            )}
          </React.Fragment>
        ))}
      </List>
    </div>
  );
}

export default Sidebar;
AuthenticatedPage.js

import React, { Component } from 'react'
import TopNavigation from '../topNavigation'
import SideNavigation from '../sideNavigation'
import Routes from '../Routes'
import Footer from '../Footer'
import IdleTimer from 'react-idle-timer'
import { IdleTimeOutModal } from '../modals/IdleTimeoutModal'
import PropertyService from '../../services/PropertyService'

import SwapHorizIcon from "@material-ui/icons/SwapHoriz"
import InboxIcon from "@material-ui/icons/Inbox"
import PresentToAllIcon from '@material-ui/icons/PresentToAll';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';
import SettingsPowerIcon from '@material-ui/icons/SettingsPower';

import ListIcon from '@material-ui/icons/List';
import LanguageIcon from '@material-ui/icons/Language';
import ListAltIcon from '@material-ui/icons/ListAlt';

import DescriptionIcon from '@material-ui/icons/Description';

import MoneyIcon from '@material-ui/icons/Money';

import FaceIcon from '@material-ui/icons/Face';
import TransferWithinAStationIcon from '@material-ui/icons/TransferWithinAStation';
import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';

import EditIcon from '@material-ui/icons/Edit';

import SettingsIcon from "@material-ui/icons/Settings";
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
import PermContactCalendarIcon from '@material-ui/icons/PermContactCalendar';

import Sidebar from '../Sidebar'

function onClick(e, item) {
  console.log("onClick e", e)
  console.log("onClick item", item)
}

const items = [
  // { name: "dashboard", label: "Dashboard", Icon: HomeIcon },
  {
    name: "transfers",
    label: "Transfers",
    Icon: SwapHorizIcon,
    items: [
      { name: "inbox", label: "Inbox", Icon: InboxIcon, onClick },
      { name: "sent", label: "Sent", Icon: PresentToAllIcon, onClick },
      { name: "acknowledged", label: "Acknowledged", Icon: ThumbUpIcon, onClick },
      { name: "bcpmode", label: "BCP Mode", Icon: SettingsPowerIcon, onClick }
    ]
  },
  {
    name: "prooflist",
    label: "Proof List",
    Icon: ListIcon,
    items: [
      { name: "proofweb", label: "Proof Web", Icon: LanguageIcon, onClick },
      { name: "proofothers", label: "Proof Others", Icon: ListAltIcon, onClick }
    ]
  },
  {
    name: "miscellaneous",
    label: "Miscellaneous",
    Icon: DescriptionIcon
  },
  {
    name: "rps",
    label: "RPS",
    Icon: MoneyIcon,
    items: [
      { name: "clientmaintenance", label: "Client Maintenance", Icon: FaceIcon, onClick },
      { name: "processsftp", label: "Process SFTP", Icon: TransferWithinAStationIcon, onClick },
      { name: "processpesonet", label: "Process PESONet", Icon: AttachMoneyIcon, onClick },
      { name: "overrideenrollment", label: "Override Enrollment", Icon: PersonPinCircleIcon, onClick },
    ]
  },
  {
    name: "messageconverter",
    label: "Message Converter",
    Icon: EditIcon
  },
  "divider",
  {
    name: "administrator",
    label: "Administrator",
    Icon: SettingsIcon,
    items: [
      { name: "usermaintenance", label: "User Maintenance", Icon: SupervisorAccountIcon, onClick },
      { name: "profilemaintenance", label: "Profile Maintenance", Icon: PermContactCalendarIcon, onClick }
    ]
  }
];

class AuthenticatedPage extends Component {

  constructor(props){
    super(props)

    this.state = {
        // timeout: 1000 * 60 * 15, /*15 mins - Initial value only, final is from property file*/
        showModal: false,
        userLoggedIn: false,
        isTimedOut: false
    }

    this.idleTimer = null
    this.onAction = this._onAction.bind(this)
    this.onActive = this._onActive.bind(this)
    this.onIdle = this._onIdle.bind(this)
    this.handleClose = this.handleClose.bind(this)
    this.handleLogout = this.handleLogout.bind(this)
    }

    _onAction(e) {
      this.setState({isTimedOut: false})
    }

    _onActive(e) {
      this.setState({isTimedOut: false})
    }

    _onIdle(e) {
      const isTimedOut = this.state.isTimedOut
      if (isTimedOut) {

      } else {
        this.setState({showModal: true})
        this.idleTimer.reset();
        this.setState({isTimedOut: true})
      }
    }

    handleClose() {
      this.setState({showModal: false})
    }

    handleLogout() {
      this.setState({
        showModal: false
      });
      this.props.history.push('/')
    }

    componentWillMount(){ /* should be called not only once */
      PropertyService
        .retrieveAllProperties()
        .then((response) => {
            this.setState({ timeout: response.data.timeout }) 
        })
    }

    render() {

      const { match } = this.props

        return (
          <React.Fragment>
            <IdleTimer
              ref={ref => { this.idleTimer = ref }}
              element={document}
              onActive={this.onActive}
              onIdle={this.onIdle}
              onAction={this.onAction}
              debounce={250}
              timeout={this.state.timeout} />

            <div>
              <TopNavigation />
              {/* <SideNavigation /> */}
              <Sidebar items={items}/>
              <main id="content" className="p-5">
                <Routes />
              </main>
              <Footer />
            </div>

            <IdleTimeOutModal 
                showModal={this.state.showModal} 
                handleClose={this.handleClose}
                handleLogout={this.handleLogout}
            />
          </React.Fragment>
        )
    }
}

export default AuthenticatedPage
如您所见，我在AuthenticatedPage中具有onClick函数

如何从那里重定向？

因为我不知道能否获得道具，所以无法使history.push工作

对不起，我还是React的初学者，这些使我感到困惑

TIA

我在路由页面中正在调用侧面导航。侧面导航功能正常，但是，我想在单击菜单项时重定向到另一个页面，就像<...>

Answer 1

您可以使用UseHistory并单击以下内容导航到该网址

import { useHistory } from "react-router-dom";
function handleClick() {
    history.push("/home");
  }