同構反應redux發送動態Id

我使用反應路由器與redux同構的應用程序。我有一個用例，href需要在客戶端和服務器端都起作用。這主要是針對SEO的原因。對於機器人應使用href和當用戶點擊它應該工作太同構反應redux發送動態Id

我的路線是這樣的

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

http://localhost:3000/product/1234（這個工程從服務器端）

一旦上述URL數據呈現，我有那種不同的網址

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

當用戶點擊上面的網址，我不想做一個回，我想用browserHistory API頁面並渲染組件，這有可能嗎？

我有這個容器

static needs = [ 
    productActions.getProductData 
    ]

任何方向將被appreicated

來源

2016-09-15 kobe

你是說當用戶點擊其中一個鏈接時，你想渲染ProductContainer服務器端？ – jacoballenwood

是的，它應該從客戶端渲染，我想我可以通過添加點擊和調度事件來做到，但是我想查找是否有沒有更好的方式沒有點擊處理器 – kobe

服務器端

你可能需要一個函數調用，會做你的調度的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() 
    } 
}

這會做你的行動的創建者通話，然後你減速器將照顧應用程序狀態。那麼你可以從該網址渲染你的組件。

客戶端

是啊，你說得對做一個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連接到你的鏈接。

這對你有幫助嗎？

來源

2016-09-15 23:56:53 jacoballenwood

謝謝，讓我試試 – kobe

如果這樣答案對你有幫助，你會考慮接受嗎？否則我會盡力幫助你！ – jacoballenwood

我可以知道瀏覽器後退按鈕是如何工作的嗎？ – kobe

同構反應redux發送動態Id

回答

相關問題