如何在reactjs（16.13.0）代码中为自定义材质ui组件执行正确的重定向？

我正在应用程序中使用react Material UI，但发现react代码中缺少一些逻辑。 下面是我完整的App.js源文件

import React from 'react';
import { fade,makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Icon from '@material-ui/core/Icon';
// import { browserHistory, Router, Route } from 'react-router';
import { BrowserRouter as Router, Route,Redirect } from "react-router-dom";

import './App.css';


/* AppBar*/
//import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
/*App bar */

import  ImgMediaCard from './ImgMediaCard';

import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';

import DemoCarousel from './MCarousel'

import Register from './Register'


var gridListStyle = {  
  marginLeft: "40px"
};

const useStyles = makeStyles(theme => ({
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(3),
      width: 'auto',
    },
  },
  searchIcon: {
    width: theme.spacing(7),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 7),
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('md')]: {
      width: 200,
    },
  },
  sectionDesktop: {
    display: 'none',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
    },
  },
  sectionMobile: {
    display: 'flex',
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  }  
}));
/*end App bar work*/
const useGridStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    // padding: theme.spacing(2),
    // textAlign: 'center',
    // color: theme.palette.text.secondary,
  },
}));

function App() {

  const Gridclasses = useGridStyles();
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

  const handleProfileMenuOpen = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = event => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  const onRegisterClick = () => {
    debugger;    
    //if(userFound){     
      <Router>
 <Route exact path="/Register" component={Register} />  
        return  <Redirect  to="/Register" />
        </Router>
   // }
 };

//  const addRoutes = () =>{

//  };

  let nums = Array.from(Array(40).keys());
  const menuId = 'primary-search-account-menu';
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
      <MenuItem onClick={handleMenuClose}>My account</MenuItem>
    </Menu>
  );

  const mobileMenuId = 'primary-search-account-menu-mobile';
  const renderMobileMenu = (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
      <MenuItem>   
      <Icon className="fa fa-plus-circle" />    
     </MenuItem>
      <MenuItem>     
        <IconButton aria-label="show 4 new mails" color="inherit">
          <Badge badgeContent={4} color="secondary">
            <MailIcon />
          </Badge>
        </IconButton>
        <p>Messages</p>
      </MenuItem>
      <MenuItem>
        <IconButton aria-label="show 11 new notifications" color="inherit">
          <Badge badgeContent={11} color="secondary">
            <NotificationsIcon />
          </Badge>
        </IconButton>
        <p>Notifications</p>
      </MenuItem>
      <MenuItem onClick={handleProfileMenuOpen}>
        <IconButton
          aria-label="account of current user"
          aria-controls="primary-search-account-menu"
          aria-haspopup="true"
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
        <p>Profile</p>
      </MenuItem>
    </Menu>
  );

  return (

    <div className={Gridclasses.root}>
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <Paper className={Gridclasses.paper}>

      <div className={classes.grow}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
          >
            <MenuIcon />
          </IconButton>
          <Typography className={classes.title} variant="h6" noWrap>
            Shopping Center
          </Typography>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div>
          <div className={classes.grow} />
          <div className={classes.sectionDesktop}>          
          <IconButton  aria-label="" color="inherit" onClick={onRegisterClick}> Sign Up             
            </IconButton> 
            <IconButton aria-label="show 4 new mails" color="inherit">
              <Badge badgeContent={4} color="secondary">
                <MailIcon />
              </Badge>
            </IconButton>
            <IconButton aria-label="show 17 new notifications" color="inherit">
              <Badge badgeContent={17} color="secondary">
                <NotificationsIcon />
              </Badge>
            </IconButton>
            <IconButton
              edge="end"
              aria-label="account of current user"
              aria-controls={menuId}
              aria-haspopup="true"
              onClick={handleProfileMenuOpen}
              color="inherit"
            >
              <AccountCircle />
            </IconButton>
          </div>
          <div className={classes.sectionMobile}>
            <IconButton
              aria-label="show more"
              aria-controls={mobileMenuId}
              aria-haspopup="true"
              onClick={handleMobileMenuOpen}
              color="inherit"
            >
              <MoreIcon />
            </IconButton>
          </div>
        </Toolbar>
      </AppBar>
      {renderMobileMenu}
      {renderMenu}
       </div>
        </Paper>
      </Grid>     
      <GridList cols={3} style={gridListStyle} cellHeight={"auto"}>
      {nums.map(n => {
        return (
          <GridListTile key={n}>
            <ImgMediaCard key={n} num={n} />
          </GridListTile>
        );
      })}
    </GridList>    

    <Grid item xs={6} sm={3}>
        <Paper className={Gridclasses.paper}>  <DemoCarousel />
        </Paper>
      </Grid>        
    </Grid>      
  </div> 
  );
}    

export default App;

注册按钮不允许我导航到注册组件

输出：注册按钮应该允许我重定向

---

我试图遵循指南并查找示例实现，但无法解决问题。

只有

呈现

和直接从

呈现

函数调用的函数应该返回JSX，因为这些函数呈现UI

当你考虑诸如<代码>登录名为“/COD>函数”时，该函数将响应于单击的按钮而被调用。在这里，您应该添加命令代码，将用户重定向到

/redirect

页面。但是在调用此函数之前，应该设置重定向的

路由

，以便React Router知道要渲染哪个组件

你的整个应用程序（通常）需要一个单一的代码>路由器组件，你的整个应用程序都被封装进去了，在你的例子中，考虑一下：

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router>
  <Route path="/Register" component={Register} />
  <Route exact path="/" component={App />
</Router>, document.getElementById("root") />

---

这里有很多假设，我确实认为在开始之前，您需要检查并更好地理解路由。

只有

呈现

和直接从

呈现

函数调用的函数应该返回JSX，因为这些是呈现UI的函数

当你考虑诸如<代码>登录名为“/COD>函数”时，该函数将响应于单击的按钮而被调用。在这里，您应该添加命令代码，将用户重定向到

/redirect

页面。但是在调用此函数之前，应该设置重定向的

路由

，以便React Router知道要渲染哪个组件

你的整个应用程序（通常）需要一个单一的代码>路由器组件，你的整个应用程序都被封装进去了，在你的例子中，考虑一下：

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router>
  <Route path="/Register" component={Register} />
  <Route exact path="/" component={App />
</Router>, document.getElementById("root") />

---

这里有很多假设，我确实认为在开始之前，您需要检查并更好地了解路线。

谢谢Agney。现在我在这一行得到一个错误。props.history.push（'/register'）；TypeError:无法读取的属性“props”undefined@maifs我以为你在上课，很抱歉。为fn componentPerfect编辑了我的答案。谢谢你，阿格尼。你能再告诉我一件事吗？如果这是类，那么我们可以在哪里定义钩子？@maifs我们不能在类组件中使用钩子，不幸的是，类的替代方法是什么？谢谢Agney。现在我在这一行得到一个错误。props.history.push（'/register'）；TypeError:无法读取的属性“props”undefined@maifs我以为你在上课，很抱歉。为fn componentPerfect编辑了我的答案。谢谢你，阿格尼。你能再告诉我一件事吗？如果这是类，那么我们可以在哪里定义钩子？@maifs我们不能在类组件中使用钩子，不幸的是，对于类来说，什么是替代方法？

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router>
  <Route path="/Register" component={Register} />
  <Route exact path="/" component={App />
</Router>, document.getElementById("root") />

function App({ history }) {
  const onRegisterClick = () => {
    history.push('/register');
  }
}