reactjs - 使用 React JS 使用 Material UI 链接链接到另一个组件

Question

我对 React 完全陌生，现在已经尝试了几个小时来链接到我制作的另一个组件。我有一个登录表单，单击 Material ui 链接后，我想将其链接到我的注册页面。我已经进行了大量搜索，但我无法让它发挥作用。

这是我的登录组件:

import React from 'react';
import {useState} from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { BrowserRouter, Route, Routes} from 'react-router-dom';
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 { createTheme, ThemeProvider } from '@mui/material/styles';
import Link from '@mui/material/Link';
import RegisterPage from './Register';
import { Link as RouterLink } from "react-router-dom";

const Register = () => (
  <BrowserRouter>
    <Routes>
      <Route exact path="/register" element={<RegisterPage />} />
    </Routes>
  </BrowserRouter>
);



function LoginCard({ Login, error }) {
  const [details, setDetails] = useState({ username: "", password: "" })

  const onFormSubmit = (e) => {
    e.preventDefault();
    Login(details);
  }


  const theme = createTheme();
  function Copyright(props) {
    return (
      <Typography variant="body2" color="text.secondary" align="center" {...props}>
        {'Copyright © '}
        <Link color="inherit" href="https://mui.com/">
          Fiin Frisører
        </Link>{' '}
        {new Date().getFullYear()}
        {'.'}
      </Typography>
    );
  }

  return(
    <ThemeProvider theme={theme}>
      <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={onFormSubmit} noValidate sx={{ mt: 1 }}>
            <TextField
              margin="normal"
              required
              fullWidth
              id="username"
              label="Username"
              name="username"
              onChange={e=> setDetails({...details, username: e.target.value})}
            />
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              onChange={e=> setDetails({...details, password: e.target.value})}
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                **<Link href="https://www.google.com" variant="body2">
                 Don't have an account yet?
                </Link>**
              </Grid>
            </Grid>
          </Box>
        </Box>
        <Copyright sx={{ mt: 8, mb: 4 }} />
      </Container>
    </ThemeProvider>
  );
};

export default LoginCard;

一旦我点击包含“还没有帐户？”文本的链接，我想重定向到另一个仅显示我的 Register 组件的组件。

一直在尝试向链接添加组件 Prop ，创建一个新函数并使用 href 和 to-tag 调用它，但似乎没有任何效果。谁能帮帮我吗？

Answer 1

如果您想链接到应用程序内部的页面，那么您需要从 react-router-dom 渲染 Link 组件，即 RouterLink 在您的代码中。您可以将其指定为 MUI Link 组件的渲染组件。从这里您可以传递任何正常的 RRD Link 属性，例如您要链接到的路由的 to 属性。

示例:

<Link component={RouterLink} to="register" variant="body2">
  Don't have an account yet?
</Link>