React Material UI + React Router >>>> 我不能在按钮的 onClick 函数中使用 Redirect

Question

I am trying to trigger the Redirect React Dom that is my button component in the handleMenuItemClick() function. But nothing happens. I have tried a bunch of stuff but but still no success.

How can I make the both work together? My best try was to make a function that return the Redirect component as I saw in one post around, but still no success. My Code:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { Grid, Button, ButtonGroup, ArrowDropDownIcon, ClickAwayListener, Grow, Paper, Popper, MenuItem, MenuList, Link }  from '@material-ui/core/Grid';


const SplitButton = (props) => {
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef(null);
    const [selectedIndex, setSelectedIndex] = React.useState(1);

    const myGroups = props.myGroups


    const handleMenuItemClick = (event, index) => {
        setSelectedIndex(index);
        setOpen(false);
        return <Redirect to={`/groups/${index}`} />
    };

    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
    };


    const handleClose = (event) => {
        if (anchorRef.current && anchorRef.current.contains(event.target)) {
            return;
        }

        setOpen(false);
    };




    return (
        <>
            <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split button">
                <Button onClick={null}>My Groups</Button>
                <Button
                    color="primary"
                    size="small"
                    aria-controls={open ? 'split-button-menu' : undefined}
                    aria-expanded={open ? 'true' : undefined}
                    aria-label="select merge strategy"
                    aria-haspopup="menu"
                    onClick={handleToggle}
                >
                    <ArrowDropDownIcon />
                </Button>
            </ButtonGroup>
            <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
                {({ TransitionProps, placement }) => (
                    <Grow
                        {...TransitionProps}
                        style={{
                            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
                        }}
                    >
                        <Paper>
                            <ClickAwayListener onClickAway={handleClose}>
                                <MenuList id="split-button-menu">
                                    { myGroups.map((group) => (
                                        <MenuItem
                                            key={group.id}
                                            onClick={(event) => handleMenuItemClick(event, group.id)}
                                        >
                                            {group.title}
                                        </MenuItem>
                                    ))}
                                </MenuList>
                            </ClickAwayListener>
                        </Paper>
                    </Grow>
                )}
            </Popper>
        </>
    );
}

export default SplitButton

Answer 1

You can redirect user via 2 methods: useHistory or <Redirect />

useHistory hook

If you want to redirect the user directly on click, you can treat the code imperatively and tell React what to do:

const history = useHistory();
    
const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
    history.push(`/groups/${index}`)
};
    

More info https://reactrouter.com/web/api/Hooks/usehistory

Redirect component

Or if you feel more comfortable using React's default declarative model, you can say what's changed and allow your code to react to this change:

const [redirectUrl, setRedirectUrl] = useState('')
    
const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
    setRedirectUrl(`/groups/${index}`)
};

if (redirectUrl) {
    return <Redirect to={redirectUrl} />
}

return (
    <>
        <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split button">
            <Button onClick={null}>My Groups</Button>
            <Button

...

More info https://reactrouter.com/web/api/Redirect