社区首页 >问答首页 >如何在react中的路由之间传递数据

问如何在react中的路由之间传递数据
EN

Stack Overflow用户

提问于 2021-04-16 14:06:21

回答 3查看 69关注 0票数 1

我在成功登录后有一个注册页面signup.js，我需要将这些数据带到另一个路径查看详细信息页面中的标志如果我在详细信息中呈现标志，那么我在同一页面中查看它如何将其带到另一个路线？？如果我在刷新后通过window.name查看，我无法查看数据页面布局

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} />

javascript

reactjs

redux

routes

router

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 3

Stack Overflow用户

发布于 2021-04-16 14:35:32

作为选择，您可以这样做：

将字段添加到状态

success: true | false

如果注册成功

setState({success: true})

并在注册组件中添加三元

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

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

在View组件中，您可以在以下位置访问它

{props.location.state}

票数 1

Stack Overflow用户

发布于 2021-04-16 14:16:40

您可以使用React路由器的useHistory()挂钩。

例如：

const history = useHistory();

...

history.push('/');

票数 0

Stack Overflow用户

发布于 2021-04-16 14:17:27

可以从Route render传递道具。您可以通过多种方式完成此操作。如果您的数据在路由器级别可用。如下所示。或者为共享数据设置存储区

const myProps = {x,y,z}

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