我正在试用Astro，并尝试在我的Astro页面上创建一个登录表单。我想在React中使用MUI组件来创建表单。同时，当表单提交时，我想触发Astro.redirect('/some-page')。我从the docs中了解到：
您可以将函数作为prop传递给框架组件，但它仅在服务器呈现期间起作用。如果您尝试在水合组件中使用该函数（例如，作为事件处理程序），则会发生错误。
这是因为Astro不能序列化函数（从服务器传输到客户端）。
所以我的问题是：当提交react from时，是否可以从正在运行的函数触发astro中的重定向？
如果没有，我怎么从react组件重定向进来？
为了更好地衡量，我已经包含了我的代码如下：
我的Astro页面看起来像这样

<Layout title="Log in">
<main>
    <div class="container box">
        <LoginFormReact client:only="react"/>
    </div>
</main>

这是LoginFormReact的内容：

import Avatar from '@mui/material/Avatar';
import CssBaseline from '@mui/material/CssBaseline';
import LoginCheckbox from './LoginCheckBox'
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import {setUser} from "../../auth/authStore";

export default function LoginFormReact() {

    return (
        <>
            <Container component={"main"} maxWidth={"xs"}>
                <CssBaseline/>
                <Box
                    sx={{
                        marginTop: 8,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >
                    <Avatar sx={{m: 1, bgcolor: 'secondary.main'}}>
                    </Avatar>
                    <Typography component="h1" variant="h5">
                        Sign in
                    </Typography>
                    <Box component="form" onSubmit={async (event) => {
                        event.preventDefault();
                        //Here I can do all the js stuff i want like storing the user object. 
                        //This is also where I want to call redirect and or call astro
                    }} noValidate sx={{mt: 1}}>
                        <TextField
                            margin="normal"
                            required
                            fullWidth
                            id="email"
                            label="Email Address"
                            name="email"
                            autoComplete="email"
                            autoFocus
                        />
                        <TextField
                            margin="normal"
                            required
                            fullWidth
                            name="password"
                            label="Password"
                            type="password"
                            id="password"
                            autoComplete="current-password"
                        />
                        <LoginCheckbox/>
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            sx={{mt: 3, mb: 2}}
                        >
                            Sign In
                        </Button>
                        <Grid container>
                            <Grid item xs>
                                <a href="#">
                                    Forgot password?
                                </a>
                            </Grid>
                            <Grid item>
                                <a href="#">
                                    {"Don't have an account? Sign Up"}
                                </a>
                            </Grid>
                        </Grid>
                    </Box>
                </Box>
            </Container>
        </>
    )
}