同构react redux发送动态Id

Question

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

我的路线是这样的

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

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

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

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

当用户点击上面的 URLS 时，我不想做 post 返回，我想使用 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()
    }
}

这会执行您的 action creator 调用，然后您的 reducer 会处理应用程序状态。然后你可以从 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 附加到您的链接。

这对你有帮助吗？

同构react redux发送动态Id

Isomorphic react redux sending Dynamic Id

reactjs

isomorphic-javascript

redux