同构反应redux发送动态ID

Question

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

我的路线是这样的

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

http://localhost:3000/product/1234（这在服务器端有效）

一旦上面的 URL 呈现数据，我就有了具有不同 URL 的页面

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

当用户点击上面的网址时，我不想回帖，我想使用 browserHistory api 渲染组件，可以吗？

我在容器里有这个

static needs = [
    productActions.getProductData
  ]

任何方向都会被欣赏

Answer 1

服务器端

您可能需要一个函数调用来执行特定路由的 onEnter 调度，这将填充您呈现组件所需的应用程序状态。

路线看起来像这样：

<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()
    }
}

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

客户端

是的，你做一个 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 附加到您的链接。

这对你有帮助吗？