node.js - 我在使用 history.Push() 重定向组件时遇到路由问题

Question

这是我的主文件，即 App.js

import { BrowserRouter, Route, Switch } from "react-router-dom"
import Home from "./Components/Home/Home"
import Auth from "./Components/Auth/Auth"

const App = () => {
  return (
    <BrowserRouter>
   

      <Route exact path="/" component={Auth} />  

      <Route  path="/home" component={Home} />  
      
    
    </BrowserRouter>
  )
}

export default App

这是“/”上的结果

登录后，我重定向到“http://localhost:3000/home”，因为 ** history.push("/home")** 这是 Auth.js 的代码

import React, { useState } from 'react'
import { Avatar, Button, Paper, Grid, Typography, Container } from '@material-ui/core'
import { GoogleLogin } from "react-google-login"
import { useDispatch } from "react-redux"
import { useHistory } from 'react-router'

import Icon from "./icon"
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
import useStyles from './style';
import Input from './Input'
const Auth = () => {
    const [showPassword, setShowPassword] = useState(false)
    const [isSignUp, setIsSignUp] = useState(false)
    const classes = useStyles()
    const dispatch = useDispatch()
    const history = useHistory()

    const handleSubmit = () => {
        console.log(`handleSubmit of form`);
    }


    const handleChange = () => {

    }


    const handleShowPassword = () => {
        setShowPassword((prevshowPassword) => !prevshowPassword)
    }


    const switchMode = () => {
        setIsSignUp((prevIsSignUp) => !prevIsSignUp)
        handleShowPassword(false)
    }


    const googleSuccess = async (res) => {
        const result = res?.profileObj;
        const token = res?.tokenId;
        try {
            dispatch({ type: 'AUTH', data: { result, token } })
           ** history.push("/home")**
        } catch (error) {
            console.log(error);
        }
    }


    const googleFailure = (err) => {
        console.log(err);
        console.log(`Google Sign In was unsuccefull. Try again later !`);
    }

    return (
        <Container component='main' maxWidth='xs'>
            <Paper className={classes.paper} elevation={3}>
                <Avatar className={classes.avatar}>
                    <LockOutlinedIcon />
                </Avatar>
                <Typography variant="h5">
                    {isSignUp ? 'Sign Up' : 'Sign In'}
                </Typography>
                <form className={classes.form} onSubmit={handleSubmit}>
                    <Grid container spacing={2} >
                        {isSignUp && (
                            <>
                                <Input
                                    name="firstName"
                                    label="First Name"
                                    handleChange={handleChange}
                                    autoFocus
                                    half
                                />
                                <Input
                                    name="firstName"
                                    label="First Name"
                                    handleChange={handleChange}
                                    xs={6}
                                    half />
                            </>
                        )}
                        <Input
                            name="email"
                            label="Email Address"
                            handleChange={handleChange}
                            type="email"
                        />
                        <Input
                            name="password"
                            label="Password"
                            handleChange={handleChange}
                            type={showPassword ? "text" : "password"}
                            handleShowPassword={handleShowPassword}
                        />
                        {isSignUp && <Input
                            name="confirmPassword"
                            label="Repeat Password"
                            handleChange={handleChange}
                            type="password"
                        />}
                    </Grid>

                    <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
                        {isSignUp ? "Sign Up" : "Sign In"}
                    </Button>

                    <GoogleLogin
                        clientId=" "
                        render={(renderProps) => (
                            <Button
                                className={classes.googleButton}
                                color="primary"
                                fullWidth
                                onClick={renderProps.onClick}
                                disabled={renderProps.disabled}
                                startIcon={<Icon />}
                                variant="contained"
                            >
                                Google Sign In
                            </Button>
                        )}
                        onSuccess={googleSuccess}
                        onFailure={googleFailure}
                        cookiePolicy="single_host_origin"
                    />
                    <Grid container justify="center" >
                        <Grid item>
                            <Button onClick={switchMode}>
                                {isSignUp ? "already have an account ? Sign In" : "Don't have an account ? Sign Up"}
                            </Button>
                        </Grid>
                    </Grid>
                </form>
            </Paper>
        </Container>
    )
}

export default Auth

代码工作正常，但在主面板中，我有一个抽屉和列表项，不仅列出项目，还有嵌套列表项或下拉主面板 Img 像这样我想以完全响应性呈现右侧白色区域内的所有字段意思是，如果我打开抽屉，它应该随着抽屉的打开和关闭调整白色区域内的组件，所以我创建了一个名为 routes.js 的单独文件，并将抽屉的所有路由放在其中，我是像这样在div中调用首页（抽屉组件）中的routes.js文件组件这是首页（抽屉组件） 的代码，您可以检查最后调用的组件

import React, { useState } from 'react';
import clsx from 'clsx';
import "./home.css"
import RoutePaths from "../../routes"
import SubMenu from "./SubMenu"


import { SidebarData } from "./sideBarData"
import { Link } from "react-router-dom"
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
    },
    appBar: {
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    appBarShift: {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: drawerWidth,
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    hide: {
        display: 'none',
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0,
    },
    drawerPaper: {
        width: drawerWidth,
    },
    drawerHeader: {
        display: 'flex',
        alignItems: 'center',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
        justifyContent: 'flex-end',
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        marginLeft: -drawerWidth,
    },
    contentShift: {
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
        marginLeft: 0,
    },
}));



export default function Home() {
    const classes = useStyles();
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);

    const handleDrawerOpen = () => {
        setOpen(true);
    };

    const handleDrawerClose = () => {
        setOpen(false);
    };
 
    return (
        <div className={classes.root}>
            <CssBaseline />
            <AppBar
                position="fixed"
                className={clsx(classes.appBar, {
                    [classes.appBarShift]: open,
                })}
            >
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerOpen}
                        edge="start"
                        className={clsx(classes.menuButton, open && classes.hide)}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" noWrap>
                        Master Panel
                    </Typography>
                </Toolbar>
            </AppBar>
            <Drawer
                className={classes.drawer}
                variant="persistent"
                anchor="left"
                open={open}
                classes={{
                    paper: classes.drawerPaper,
                }}
            >
                <div className={classes.drawerHeader}>
                    <IconButton onClick={handleDrawerClose}>
                        {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
                    </IconButton>
                </div>
                <Divider />
             
                <List>
                    <h2 className="adminText_style">Admin</h2>
                   
                    {SidebarData.map((item, index) => {

                        return <SubMenu item={item} key={index} />;
                    })}

                </List>
                <Divider />
            </Drawer>
            <main
                className={clsx(classes.content, {
                    [classes.contentShift]: open,
                })}
            >
                <div className={classes.drawerHeader} />
                <RoutePaths />
            </main>
        </div >
    );
}

但是，在身份验证后更改路由时，它会将组件加载到其他地方并且没有显示任何内容，因为路由无法正常工作。从身份验证重定向后显示主页，但抽屉内的字段显示这些结果

我怎样才能摆脱这个问题？

如果有人得到解决方案，我将离开我的 Gmail 帐户，请在此处告诉我，或者我可以通过 Gmail 发送源代码的 zip 文件以便更好地了解 Gmail：“[e-mail]”

标签： node.jsreactjsredux