javascript - 重新路由到传递响应数据的组件

Question

有什么方法可以将发布请求的响应传递给另一个组件，然后重新路由到该组件？

这是一个简短的例子:

这是主应用程序...

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Login from './components/login.component'
import Homepage from './components/homepage.component'

const App = () => (
    <Router>
        <Route path="/" exact component={ Login } />
        <Route path="/homepage" component={ Homepage } />
    </Router>
)

export default App

这是带有发布请求的表单...

import React from 'react'
import axios from 'axios'

const Login = () => {

    const handleSubmit = event => {
        event.preventDefault()
        axios.post( API, {
            user_id: 'demo',
            user_pwd: 'demo'
        })
        .then( res => {
            console.log( res.data )
            // ???
        })
    }

    return(
        <form onSubmit={ handleSubmit }>
            ...
        </form>
    )

}

export default Login

这里是我想以某种方式获取响应数据的地方

import React from 'react'

const Homepage = props => {
    console.log( props )
}

export default Homepage

Answer 1

处理此类情况的最佳方法是在您的应用程序中有一个提供程序，您可以在其中存储此数据，然后在您想要的任何组件中使用它

对于您的情况，如果您已经在使用上下文提供程序或什至是 redux 会很好

UserContext.js

export const UserContext = React.createContext();

用户提供者.js

export default class UserProvider extends React.Component {
   state= {
      userData: null
   }
   updateUserData = (userData) => {
      this.setState({userData})
   }
   render() {
       return <UserContext.Provider value={{userData: this.state.userData, updateUserData: this.updateUserData}} >{this.props.children}</UserContext.Provider>
   }

}

主应用

const App = () => (
  <UserProvider>
    <Router>
        <Route path="/" exact component={ Login } />
        <Route path="/homepage" component={ Homepage } />
    </Router>
  </UserProvider>
)

export default App

登录

const Login = () => {
    const {updateUserData} = useContext(UserContext);
    const handleSubmit = event => {
        event.preventDefault()
        axios.post( API, {
            user_id: 'demo',
            user_pwd: 'demo'
        })
        .then( res => {
            console.log( res.data )
            updateUserData(res.data);
        })
    }

    return(
        <form onSubmit={ handleSubmit }>
            ...
        </form>
    )

}

export default Login

在首页

import React from 'react'

const Homepage = props => {
    console.log( props )
    const {userData} = useContext(UserContext);
    console.log(userData);
}

export default Homepage