Javascript 将状态从App.js传递给React路由器组件

我在App.js中有一个状态，由API返回的动物数据填充。通过加载的组件上的This.state.animals可以访问此数据，但我的问题是，当更改到/animals的路由时，我不能再调用This.state.animals。就好像我不再有访问权限或者数据不见了。当我导航到任何组件时，如何将状态传递给它们

App.js

组件/动物.js

---

路由声明是在路由器上下文之外定义的。当使用React路由器时，您的所有组件都应该在它们的祖先中有一个。通常，如果您不使用其他需要根上下文定义的库（如Redux），则顶层组件是否至少在中呈现。

在本例中，如果您要访问动物数据，则它将是{this.props.parentState}在动物组件内部

您是否尝试在动物中访问它，如此.props.parentState？我认为如果您想在从一条路线导航到下一条路线时保留数据，您需要使用Redux或Flux。@NicholasTower您可能找到了一些东西。。。将报告back@NicholasTower事实确实如此。谢谢你指出这一点，效果很好！粘贴我的代码时出现问题，更新了上面的代码。正如Nicholas Tower所指出的，只需在动物组件中作为This.props.parentState访问即可

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import Animals from './components/Animals'

class App extends Component {
  state = {
    animals: []
  }

  componentDidMount() {
    fetch('animals api path here')
    .then(result => result.json())
    .then((data) => {
      this.setState({ animals: data })
    })
    .catch(console.log)
  }

  render() {
    return (
          <Router>
            <NavLink to="/animals">animals</NavLink>
            <Route exact path="/animals" render={()=> <Animals parentState={this.state.animals} />} />
          </Router>
    );
  }
}

export default App

import React, { Component } from 'react'

class Animals extends Component {
  render() {
    console.log(this.state.animals)
    return (
      <h2>Animals</h2>
    //<div>I would loop through and list the animals if I could...</div>
    )
  }
}

export default Animals