通过react-router-dom传递道具的问题

Question

我正在尝试通过react-router-dom传递数据，特别是我想将状态数据保存在App.js文件中，该文件用于路由到其他页面。我无法让道具通过。我在这做什么以下是我要执行的操作的示例：

App.js

animal_list = ['cat', 'elephant', 'camel', 'bear', 'dog']

locsX = []
locsY = []
locsZ = []
animalsX = {}
animalsY = {}
animalsZ = {}

for i in range(0, len(animal_list)):
    for j in range(0, len(emplaced_animals_data)):
        for k in range(0, len(animal_list)):
            if animal_list[i] == animal_list[k] and animal_list[i] == emplaced_animals_data[j,0]:
                locsX = np.append(locsX, emplaced_animals_data[j,1])
                locsY = np.append(locsY, emplaced_animals_data[j,2])
                locsZ = np.append(locsZ, emplaced_animals_data[j,3])
                animalsX.update({animal_list[k]:locsX})
                animalsY.update({animal_list[k]:locsY})
                animalsZ.update({animal_list[k]:locsZ})
print(animalsX)
print(animalsY)


{'cat': array(['4', '5', '6', '7'], dtype='<U32'), 'elephant': array(['4', '5', '6', '7', '8', '9', '10'], dtype='<U32'), 'camel': array(['4', '5', '6', '7', '8', '9', '10', '10', '11', '12', '12'],
      dtype='<U32'), 'bear': array(['4', '5', '6', '7', '8', '9', '10', '10', '11', '12', '12', '13',
       '5', '4', '6', '15'], dtype='<U32'), 'dog': array(['4', '5', '6', '7', '8', '9', '10', '10', '11', '12', '12', '13',
       '5', '4', '6', '15', '1', '2', '3', '4'], dtype='<U32')}
{'cat': array(['4', '5', '6', '8'], dtype='<U32'), 'elephant': array(['4', '5', '6', '8', '9', '10', '10'], dtype='<U32'), 'camel': array(['4', '5', '6', '8', '9', '10', '10', '11', '6', '5', '3'],
      dtype='<U32'), 'bear': array(['4', '5', '6', '8', '9', '10', '10', '11', '6', '5', '3', '13',
       '15', '10', '9', '13'], dtype='<U32'), 'dog': array(['4', '5', '6', '8', '9', '10', '10', '11', '6', '5', '3', '13',
       '15', '10', '9', '13', '3', '12', '10', '8'], dtype='<U32')}

导出默认应用；

Home.js

import React, { Component } from 'react';
import Home from './Home';
import {BrowserRouter as Router, Route,Switch, withRouter } from 'react-router-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      testProps:7
    }
  }

  render() {
    return (
      <Router>
        <div>
          <Route 
            exact path="/" 
            component = {Home} 
            render={(props) => <Home testProps={this.state.testProps} {...props}  />}/>
       </div>
      </Router>

    );
  }
}

在我的主页上，我看到：import React, { Component } from 'react'; class Home extends Component { render() { return ( <div> {`passing props from state: ${this.props.testProps}`} </div> ); } } export default Home; 。我的处理方式不正确吗？