Question

我正在使用带有redux的react路由器用于同构应用。我有一个用例，其中href需要在客户端和服务器端都工作。这主要是出于SEO的原因。对于机器人它应该使用href，当用户点击它时也应该工作

我的路线看起来像这样

 <Route name="app" component={ProductPage} path="/product/:Id">
      <IndexRoute component={ProductContainer}/>
  </Route>

http://localhost:3000/product/1234（这可以从服务器端运行）

上述网址呈现数据后，我的网页会显示不同类型的网址

http://localhost:3000/product/3456
http://localhost:3000/product/9999

当用户点击上述网址时，我不想回复帖子，我想使用browserHistory api并渲染组件，是否可能？

我在容器中有这个

static needs = [
    productActions.getProductData
  ]

任何方向都将被瞄准

Answer 1

服务器端

您可能需要一个函数调用来调用特定路径的输入，这将填充您需要渲染组件的应用程序状态。

路线看起来像这样：

<Route component={ProductPage} path="/product/:Id" onEnter={requireProductData} />

requireProductData将是你的main.js中的一个函数：

function requireProductData(nextState, replace, callback) {
    const { params } = nextState
    var idNum = parseInt(params.id.toString().split("-")[0])
    const currentState = store.getState()
    if (idNum > 0) {
        store.dispatch(ProductActionCreators.productInfo({ id: idNum })).then((event) => {
           callback()
        }, (error) => {
           callback()
        })
    } else {
        callback()
    }
}

这将执行您的操作创建者调用，然后您的reducer将处理应用程序状态。然后你可以从那个网址渲染你的组件。

客户端

是的，你是关于做onClick处理程序的。以下是单击按钮导致带调度的API调用的示例：

class SubscribeUserDialog extends Component {

    subscribeUser(privacy) {
        const { dispatch, readingPlan, auth } = this.props
        if (!auth.isLoggedIn) window.location.replace(`/sign-in`)
        // if user isn't subscribed, then subscribe!
        if (!readingPlan.subscription_id) {
            dispatch(ActionCreators.readingplanSubscribeUser({ id: readingPlan.id , private: privacy }, auth.isLoggedIn)).then(() => {
                // redirect to plan
                this.goToPlan()
            })
        } else {
            // user already subscribed
            this.goToPlan()
        }
    }



    render() {

        return (
            <div className='plan-privacy-buttons text-center'>
                <p className='detail-text'><FormattedMessage id="plans.privacy.visible to friends?" /></p>
                <div className='yes-no-buttons'>
                    <a className='yes solid-button green' onClick={this.subscribeUser.bind(this, false)}><FormattedMessage id="ui.yes button"/></a>
                    <a className='no solid-button gray' onClick={this.subscribeUser.bind(this, true)}><FormattedMessage id="ui.no button" /></a>
                </div>
            </div>
        )
    }
}

export default SubscribeUserDialog

在您的情况下，您可以将onClick附加到您的链接。

这对你有帮助吗？

同构反应redux发送动态Id

1 个答案: