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

Question

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

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

就像class Music { final int id; final String name, size, rating, duration, img; bool favorite; Music({ this.id, this.rating, this.size, this.duration, this.name, this.img, this.favorite, }); factory Music.fromJson(Map<String, dynamic> jsonData){ return Music( id: jsonData['id'], rating: jsonData['rating'], size: jsonData['size'], duration: jsonData['duration'], name: jsonData['name'], img: jsonData['img'], favorite: false, ); } }

中发生的事情一样

Sidebar.js

<NavLink to="/">

AuthenticatedPage.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中有一个onClick函数

如何从那里重定向？

由于我不知道能否获得道具，所以无法使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 工作

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

TIA

-编辑- 将history.push转换为功能组件

AuthenticatedPage.js

Answer 1

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

功能组件：

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

类组件：

import { withRouter } from 'react-router-dom';

  function handleClick() {          
            this.props.history.push("/home");
          }
export default withRouter(AuthenticatedPage );