Question

在查看this react-router tutorial之后，我尝试将我在此学到的内容整合到我的项目中。

我的场景类似于教程中的数字2，除了当用户输入/时，我想获取api并重定向到从api看来的第一个类别{{1 }}

我的路由器看起来像这样

[{'category':'electronics', 'items':[{..}],..},..]

我的Routes.js看起来像这样

import RoutaZ from 'Routes.js';
...

<Router history={hashHistory}>
 <Route path="/" component={App}>
  <IndexRedirect to={RoutaZ.state.data[0].name} />
  <Route path=":category" components={Container, SideNavigation} />
 </Route>

在路由器中，let Routes = React.createClass({ getInitialState () { return { data: null } }, componentDidMount() { var self = this; fetchData().then(function(results){ self.setState({data: results.data}); }) }, render() { /* want to return the the first category from api */ return this.state.data[0].name } });返回undefined，因为初始状态为null。如果我将初始状态设置为[{＆＃39; category＆＃39;：＆＃39; hello＆＃39;，...}]，它会返回hello并按预期重定向到hello页面。获取数据包后，我该怎么做才能重定向？

1）如何使用来自react-router的RoutaZ.state.data[0].name和我当前的配置？

2）我如何以及在哪里设置父组件到我的路由器处理所有提取并将其作为孩子传递给路由器？

编辑：这只是我的应用程序的一小部分，已完成，但我只有此重定向问题。我知道我可以使用redux-saga，但我的所有应用程序都已经完成，并且必须完全重做它，这是我买不起的。

1-我尝试使用onEnter，但我不知道应该放在哪里。

2 - 在我的应用程序的某处，从父组件获取数据并将其作为道具传给孩子，孩子从api接收数据。

Answer 1

解决了它。我必须在安装组件时推送结果

componentDidMount() {
 var self = this;
 fetchData().then(function(results){
  router.push(results.data[0].category);
 })
},

React-Router对我的生命周期路由器感到困惑

1 个答案: