how to pass data between routes in react

Question

I have a signup page signup.js after successful sign in I need to take those data to another route view sign in details page if I render sign in details then I am viewing it in the same page how to take it to another route ??If I do through window.name after refresh I couldn't view the data[my page layout]

1st page
class Validation extends Component {
  constructor(props) {
    super(props);
     
    this.validate = this.validate.bind(this);
   
   }
validate(detail,number) {
//i need to take this number to view page 
    });
     
      
  
 
   }
  render() {
    
     return (
      <div>
        
        <SignupForm onAddDetail={this.validate} />
             
        
      </div>);
  }
}
  
export default Validation;
2nd page


class DetailsComponent extends Component {
  
  render() {
       let DetailNodes = this.props.details.map(detail => 
       (
        <Register key={detail.id}  
          emailId={detail.emailId} password={detail.password}
           firstName={detail.firstName} lastName={detail.lastName}
            location={detail.location} mobileNumber={detail.mobileNumber}>
          
           
        </Register>
        
      )
       
      );
         
      return (
       
        <div> <br></br><br></br><br></br><br></br>
               
              {DetailNodes[number-1]}//I need that number from 1st page and carried here
                            
               <br/>
               
    </div>);

}
  
}

route.js    
my route page
<Route path="/signup" component={Validation}/>
           
 <Route path="/view"  component={DetailsComponent} />

Use `history.push` to pass location data as suggested in [this answer](https://stackoverflow.com/a/62237212/2873538). — Ajeet Shah, Apr 16 '21 at 15:17
this is working if I move from signup page to view page .If I move directly to view route the value becomes undefined .I have signup values in signup page without redirecting if I directly clicks that view route also I need to have those values is there anyway?? — dev, Apr 17 '21 at 08:45
Store the data in a central store like Redux and any component can read from there. — Ajeet Shah, Apr 17 '21 at 10:20
I am very new to react any example or website link will be useful. please consider my request — dev, Apr 17 '21 at 11:56
Here is how to do it: 1. User enters email/password 2. Login is successful and API returns user details (and, maybe auth tokens) 3. Store user details (and, maybe auth tokens) in LocalStorage 4. *Read* from localstorage wherever (any component) you need to show user details. — Ajeet Shah, Apr 17 '21 at 12:01
Are you using Redux? Do you need resources on "How to add Redux to your app?" — Ajeet Shah, Apr 17 '21 at 12:01
Already I used redux to store my registration details but for local storage I have no idea. Is it possible to store id (integer value ) and retrieve it ??can I get any source for local storage and retrieving it — dev, Apr 17 '21 at 16:24
If you have stored **user details in Redux**, it will be lost when you reload (F5 button) the page. Is this (losing user details in Redux at refresh) your problem? — Ajeet Shah, Apr 17 '21 at 16:26
See the last *Edit* part in this answer: https://stackoverflow.com/a/66550417/2873538 to fix above (losing user details in Redux at refresh) issue. — Ajeet Shah, Apr 17 '21 at 16:29
Thanku so much using local storage iam able to get it even after refresh. I didn't do anything to fix it even though it's working after refresh — dev, Apr 18 '21 at 06:19

score 1 · Answer 1 · answered Apr 16 '21 at 14:35

As option you can do it like this:

add field to state

success: true | false

and if signup is successfull

setState({success: true})

and in signup component add ternary

import {Redirect} from 'react-router-dom';

!success ? <SignUp /> : <Redirect to={{
                                    pathname: '/view',
                                    state: {data: signUpCredentials}
                                }}
                                />

and in View component you can access it in

{props.location.state}

score 0 · Answer 2 · answered Apr 16 '21 at 14:16

0

You can use the useHistory() hook of React router.

For eg:

const history = useHistory();

...

history.push('/');

answered Apr 16 '21 at 14:16

T J

42,762
13
83
138

score 0 · Answer 3 · answered Apr 16 '21 at 14:17

You can pass props from Route render. You can do this in multiple ways. If your data is available at router level. Like below. Or setup up a Store for shared data

const myProps = {x,y,z}

<Route path="/signup" render={()=> <Validation myNewProp='someprop' />} />             
<Route path="/view"  render={()=> <DetailsComponent {...myProps} />} />

how to pass data between routes in react

3 Answers3