Javascript 需要关于react路由器的帮助吗

我是一个新的反应，我有麻烦通过阵列作为道具

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

在这个函数中，我从flickr api请求数据来显示照片，我使用setState tocats来保存数据数组

//this function will retrieve the CATS pictures

   renderCats = () => {
    //fetch data from flickr
    axios 
      .get(
        ` https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=cats&per_page=24&format=json&nojsoncallback=1`
      )
      .then(response => { //set the response so that pics will be equal to the data array containing cat photos from flickr
        console.log(response)
        this.setState({
          cats: response.data.photos.photo, 
          loading: false //initialize a loading state to display a loading message
        });
      })
      .catch(error => { //this catch method outputs a message to the console, should axios fail to retrieve data
        console.log("Something went wrong, could not access data", error);
      });
  }; 

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

然后在render（）中，我尝试使用下面的代码段，其中/cats是我的导航链接，我尝试渲染一个名为cats的组件，但同时我尝试使用data={this.state.cats}传递数据数组

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

---

您的代码看起来不错，除了

路径上的
渲染
道具

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

}/>

如果不需要将其作为函数，则可以使用

组件

：

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

---

您的代码看起来不错，除了

路线上的
渲染
道具

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

}/>

如果不需要将其作为函数，则可以使用

组件

：

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

---

错误在于如何传递道具。以你为例,

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

数据支柱基本上会被忽略。但是，如果您这样传递它：

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

<Route
  path="/cats"
  render={(props) => <Cats {...props} data={this.state.cats} />}
/>

}
/>

---

你可以访问它。然而，为了使事情更简单，我是否可以建议将实际的数据获取函数移动到需要它的组件中？这样，如果你正在抓取20种不同的东西，比如猫、狗、老鼠，这取决于你的设置，你会在整个应用程序中渲染你可能需要或不需要的数据。

错误在于你如何传递道具。以你为例,

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

数据支柱基本上会被忽略。但是，如果您这样传递它：

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } /> 

<Route
  path="/cats"
  render={(props) => <Cats {...props} data={this.state.cats} />}
/>

}
/>

你可以访问它。然而，为了使事情更简单，我是否可以建议将实际的数据获取函数移动到需要它的组件中？这样，如果你正在抓取20种不同的东西，比如猫、狗、老鼠，这取决于你的设置，你会在整个应用程序中渲染你可能需要或不需要的数据

 <Route path="/cats" render={ <Cats data={this.state.cats} /> } />