Link to another component using material UI link using React JS

Question

I'm completely new to React and been trying a few hours now to link to another component that I've made. I have this log-in form that I want to link to my sign up page once a material ui link is clicked. I've been searching a ton, but I can't just get it to work.

This is my login-component:

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;

Once I click the Link that wraps the text "Dont have an account yet?" I want to redirect to another component showing only my Register component.

Been trying to add component props to the link, creating a new function and calling that, using href and to-tag but nothing seems to work. Can anyone help me out?

Drew Reese · Accepted Answer · 2022-09-16 08:34:38Z

2

If you want to link to a page internal to your app then you will need to render the Link component from react-router-dom, i.e. the RouterLink in your code. You can specify this to be the rendered component for the MUI Link component. From here you pass any of the normal RRD Link props, like the to prop for the route you are linking to.

Example:

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

answered Sep 16, 2022 at 8:34

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Link to another component using material UI link using React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related