I want to know how to send props through Link-CodePudding

I made two components and I want to send a props after connecting these components by Link. I'm working on it without using redux, but I found a way to send props and made a code, but the value doesn't come out because I think the method is wrong. I'd appreciate it if you let me know thanks.

SingUp.jsx: This is the component I'm trying to send a prop. I checked that the value comes out well if I put the value in the input tag. So I think you just need to check the link tag part! I only sent the email value and put email in props to check it

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import SignUpEmailInput from '../components/SingUp/SignUpEmailInput';
import SignUpLoginButton from '../components/SingUp/SignUpLoginButton';
import SignUpNameInpu from '../components/SingUp/SignUpNameInpu';
import SignUpPassInput from '../components/SingUp/SignUpPassInput';
import SignUpUserInput from '../components/SingUp/SignUpUserInput';


const SignUpWrap = styled.div`
  flex-direction: column;
  display: flex;
  position: relative;
  z-index: 0;
  margin-bottom: calc(-100vh   0px);
  color: rgb(38,38,38);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
`

function SignUp() {

  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [userName, setUserName] = useState("");
  const [passWord, setPassWord] = useState("");

  return (
    <SignUpWrap>     
      <div>
        <SignUpEmailInput email={email} setEmail={setEmail}/>
      </div>
      <div>
        <SignUpNameInpu name={name} setName={setName}/>
      </div>
      <div>
        <SignUpUserInput userName={userName} setUserName={setUserName} />
      </div>
      <div>
        <SignUpPassInput passWord={passWord} setPassWord={setPassWord}/>
      </div>
      <div >
        {/* I used Link here */}
        <Link  to={{pathname:'/birthday', state:{email:email}}} style={{textDecoration : 'none' ,color: 'inherit'}}>
          <div>
            <SignUpLoginButton email={email} name={name} userName={userName} passWord={passWord}/>
          </div>
        </Link>
      </div>
    </SignUpWrap>
  )
}

export default SignUp;

Birthday.jsx:

This is the component that I want to receive a prop. I checked that the two components are moved through Link. Can I also know how to get a props value here? I want to check if it went well through console.log

import React, { useState } from 'react'


function Birthday({email, name, userName, passWord}) {
  
  console.log(location.state.email)

  return (
    <>
    Hi
    </>
  )
}

export default Birthday;

CodePudding user response：

you can use state prop as below - using RR V6 version FYI

<Link to="/hello" state={{ data: 'dummy' }}>

and use useLocation hook to collect data in respective component as

const location = useLocation();
console.log(location.state);

A sample e.g. below

https://stackblitz.com/edit/react-ts-mxqsgj?embed=1&file=App.tsx

CodePudding user response：

<Link to="/birthday" state={{email : email }} style={{textDecoration : 'none' ,color: 'inherit'}}>

you can get by using useLocation

import React, { useState } from 'react';
import { useLocation } from 'react-router-dom'

function Birthday() {
  const location = useLocation()
  const { email } = location.state
  console.log(email)
  return email
}
export default Birthday;