React-Router v3處理兒童路由數據獲取

我真的很苦惱與反應路由器中的ChildRoutes和任何幫助方向將不勝感激。React-Router v3處理兒童路由數據獲取

我想用這種方式定義我的路線。

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="about" component={About}/> 
     <Route path="users" component={Users}> 
     <Route path="/user/:userId" component={User}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router>

主要問題是用戶。所以當用戶點擊/用戶時，我會從API加載所有用戶。當他導航到用戶/ 1時，我會通過從routeParams獲取userId以及用戶1的獲取詳細信息來讀取用戶狀態中的數據。

我希望孩子路線能夠像說如果有人粘貼URL一樣工作/ users/1直接在瀏覽器中，那麼路由仍然會加載我的用戶組件，它將加載所有用戶，瀑布流將繼續。

現在，這裏是我的問題，用戶的細節是完全在我的應用了新的一頁，所以即使路由器負載用戶 compoennt我想瀏覽和渲染用戶成分，如果我的網址模式完全匹配/用戶/：用戶ID。我不知道如何使用react-router v3.0.4來實現這一點。所以快樂的路徑是第一個組件用戶得到加載，然後當用戶點擊時，路徑變爲用戶/：userId和用戶組件呈現。但是複雜的路徑是當某人直接在瀏覽器中加載用戶/ userId時，用戶組件應該被掛載，然後基於location.path用戶組件應該被呈現。

再次任何與此有關的幫助將不勝感激。

感謝

來源

2017-08-10 Sourav Chatterjee

你爲什麼不創建一個父組件User加載上項的數據，然後把UserProfile（或任何這是加載）作爲子組件...這將是這個樣子：

import React, { Component } from 'react'; 

const mapDispatchToProps = { 
    getDate: someAction.getData 
} 

@connect(state => state, mapDispatchToProps); 
export default class User extends Component { 

    componentWillMount() { ...loadData } 

    render() { return {...this.props.children} } 
}

在你的路由

然後

<Route path="users" component={Users}> 
    <Route path="user" component={User}> 
     <Route path="/:id" component={UserProfile} /> 
    </Route> 
</Route>

我本來可以在更多的細節，但是我覺得我解釋基因ral概念。讓我知道事情的後續！

使用這種方法可以保證每次加載數據。

來源

2017-08-11 12:53:12

是的，這就是我想要的。現在我的用戶視圖和用戶配置文件視圖是完全不同的說明和詳細信息，所以我想有條件地渲染this.props .Children或User視圖，就像我在v4.is中猜測的開關那樣有一種方法可以根據URL ？謝謝（你的）信息。 –

React-Router v3處理兒童路由數據獲取

回答

相關問題