reactjs - 如何在 reactjs(16.13.0) 代码中为自定义材质 ui 组件执行正确的重定向?
问题描述
我在应用程序中使用 react Material UI,但发现我的反应代码缺少一些逻辑。我完整的 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;
并且以下功能不会将我带入第二个组件。我不知道为什么。
const onRegisterClick = () => {
debugger;
//if(userFound){
<Router>
<Route exact path="/Register" component={Register} />
return <Redirect to="/Register" />
</Router>
// }
};
因为我是一个反应新手。我应该在我的代码中做什么?
我从这里获取了菜单和卡片的示例代码:https ://material-ui.com
构建的应用程序
{
"react": "16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"redux": "^4.0.4"
"@material-ui/core": "^4.9.5"
}
注册按钮不允许我导航到注册反应组件。
输出:注册按钮应该允许我重定向。
我尝试遵循指南并查找示例实现,但无法解决问题。
解决方案
只有render
直接从render
函数调用的和函数应该返回 JSX,因为这些是呈现 UI 的函数。
当您考虑类似onRegisterClick
函数时,会调用此函数以响应单击按钮。在这里,您应该添加命令式代码以将用户重定向到/redirect
页面。但是Route
应该在调用此函数之前设置 for 重定向,以便 React Router 知道要渲染哪个组件。
您的整个应用程序(通常)需要一个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") />
在此之后,您可以导航:
function App({ history }) {
const onRegisterClick = () => {
history.push('/register');
}
}
这里有很多假设,我认为您需要查看React Router 文档并更好地了解路由,然后才能开始。
推荐阅读
- java - Spring cloud netflix eureka server - 启动时出现tomcat错误
- android - 如何在 MVP 中测试读取/更新文件?
- php - php从新数组追加到json数组
- java - 如何以编程方式在顶部和底部的垂直线性布局中设置一个视图?
- php - 缓慢的 PHP 会话
- javascript - 为什么“Circle”类看不到我发送给他的参数?
- objective-c - 将 AWS 用于 android 和 iphone 应用程序
- excel - 如何计算excel中属于每个组织的唯一名称的数量?
- azure-data-factory - 将 ADF 复制活动与动态架构映射结合使用
- excel - 在 Excel 中的 Sheet1 中显示从 Sheet2 到 Sheetn 的最新条目