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

Question

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

这是一个缩短的示例：

这是主要的应用程序...

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 如果您已经在使用它会很好用户上下文.jsexport const UserContext = React.createContext();用户提供者.jsexport default class UserProvider extends React.Component {&nbsp; &nbsp;state= {&nbsp; &nbsp; &nbsp; userData: null&nbsp; &nbsp;}&nbsp; &nbsp;updateUserData = (userData) => {&nbsp; &nbsp; &nbsp; this.setState({userData})&nbsp; &nbsp;}&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; &nbsp;return <UserContext.Provider value={{userData: this.state.userData, updateUserData: this.updateUserData}} >{this.props.children}</UserContext.Provider>&nbsp; &nbsp;}}主应用程序const App = () => (&nbsp; <UserProvider>&nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; &nbsp; <Route path="/" exact component={ Login } />&nbsp; &nbsp; &nbsp; &nbsp; <Route path="/homepage" component={ Homepage } />&nbsp; &nbsp; </Router>&nbsp; </UserProvider>)export default App登录const Login = () => {&nbsp; &nbsp; const {updateUserData} = useContext(UserContext);&nbsp; &nbsp; const handleSubmit = event => {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault()&nbsp; &nbsp; &nbsp; &nbsp; axios.post( API, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; user_id: 'demo',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; user_pwd: 'demo'&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then( res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log( res.data )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updateUserData(res.data);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={ handleSubmit }>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; )}export default Login并在主页import React from 'react'const Homepage = props => {&nbsp; &nbsp; console.log( props )&nbsp; &nbsp; const {userData} = useContext(UserContext);&nbsp; &nbsp; console.log(userData);}export default Homepage

Answer 2

考虑像 Context / Redux 这样的“商店经理”是个好主意。如果您将它包裹在一些组件周围，那么将必要的数据交付给需要它的组件会容易得多。

Answer 3

这样做的方法是在父组件上使用存储。您可以使用useContext钩子来完成。这是一个关于如何实现它的好教程。该算法将是这样的：使用 Axios 执行登录并将从 API 获取的用户设置为上下文存储将用户重定向到特定路由从上下文中获取用户