时间戳

首页 > 解决方案 > 当数据来自消费者时，如何导航到动态生成的 url？

reactjs - 当数据来自消费者时，如何导航到动态生成的 url？

问题描述

我通过 React 上下文提供者和消费者在父组件 ( App) 和它的子组件 () 之间共享数据。MyClass子组件接收到一些数据，需要将其发送到服务器以获取相应的 URL，然后使用generateLink(context)以下代码导航到它。

仅在 generateLink 返回响应并导航到该链接后，如何才能启用该按钮？Go to page

import React from 'react'
import { AppContext } from './MainContent';

class MyClass extends React.Component {

    generateLink(context){
        // Access to db, get the url, and only then navigate to the url
        // The Api call is working, just removed it for space.

    }

    render() {
        return (
            <AppContext.Consumer>
                {context => (
                    <div className="container">
                            {context.chosenItems.map((item) =>
                                <div key={item} className="combination-object">
                                    <button>Item : {item} </button>
                                </div>
                            )}
                        <button onClick={this.generateLink.bind(this, context)}>
                            Go to page
                        </button>
                    </div>
                )}
            </AppContext.Consumer>
        )
    }
}

export default MyClass

我创建了一个路由器和一些路由，例如<Route path="/:uniqueUrl" exact component={MyPage} />

还有一个 MyPage 组件，例如：

function MyPage({match}){

    React.useEffect(() => {
        console.log(match)
    })

    return(
        <div>
            <h1>combination page</h1>
        </div>
    )
}


export default MyPage

我怎样才能让它发生？

标签： reactjsreact-router

解决方案

首先，您需要将 react-router 连接到您的MyClass组件。你可以使用useHistory钩子来做到这一点。https://reacttraining.com/react-router/web/api/Hooks/usehistory。

从后端返回您的 http 请求后，您可以调用history.push('/' + results.uniqueUrl). 结果是您的 API 调用的响应。

推荐阅读