Question

您好，我有以下用于“登录”和“主页”组件的路由：

<Route exact path="/" name="Login Page" component={Login} />
<Route path="/home" name="Home" component={Home} />

Login组件使用react-final-form形式将用户输入提交到后端，然后像这样返回首页

onSave = async (values) => {

 const user = await Api.postURL("/register", values);
 window.location.href = '/home';
}

我如何将用户数据从后端传递到Home组件以稍后显示？

我将非常感谢您的帮助

Answer 1

简单的方法是localStorage。

onSave = async (values) => {
   const user = await Api.postURL("/register", values);
   localStorage.setItem("user",JSON.stringify(user));
   window.location.href = '/home';
}

在您的Home组件中，

class Home extends React.Component{
  render(){
     const user = JSON.parse(localStorage.getItem("user"));
     return(
        ...
     );
  }
}

另一种方法是使用react-router-dom包中的Redirect。

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


onSave = async (values) => {
   const user = await Api.postURL("/register", values);
   <Redirect to={{
         pathname: '/home',
         state: { user:  JSON.stringify(user)}
     }}
   />
}

在您的Home组件中，

class Home extends React.Component{
  render(){
     const user = JSON.parse(this.props.location.state.user);
     return(
        ...
     );
  }
}

将数据传递到React-router中的其他组件

1 个答案: