有几种不同的方法......不错的选择是使用一些状态管理层，如 Redux 或 MobX

一个简单的方法是让您的Main组件将这些数据保存在其状态中，并将其作为props传递给其他页面。由于您正在使用，react-router您需要this.props.children在Main组件中克隆以添加额外的props，如数据和设置数据的函数。

您的Main组件可能看起来像

class Main extends Component {
   constructor(props) {
      this.state = {
         data: 'some default data',
      }
   }

   updateData(data) {
      this.setState({ data });
   }

   render() {
     return <div>
        <Header />
        {React.cloneElement(this.props.children, { data: this.state.data, setData: this.updateData })}
     </div>
   }
}

class MainPage extends Component {

   render() {
      return <div>
         <input type="text" onChange={e => this.props.setData({ field: e.target.value })} />
         <Link to="/DisplayResults">Go to Results</Link>
      </div>
   }
}

class DisplayResults extends Component {
   render() {
       return <div>
         {this.props.data.field}
       </div>
   }
}

从技术上讲，React 创建了一个单页面应用程序，因此没有其他页面可以传递数据。

但是，我相信您可能正在谈论将数据传递到components. 我总是构建我的应用程序做出react到container和component文件夹。容器文件夹是所有逻辑组件所在的位置，组件文件夹是所有 UI 组件所在的位置。

让 React 如此直观的原因之一是您可以轻松地通过 props 将数据从父组件传递到子组件。换句话说，我的逻辑组件通过 props 将数据传递给 UI 组件。

例如，假设我希望名为 Dashboard 的逻辑组件将组织数据传递给我的 UI 组件MyChildComponent，我会执行以下操作：

containers/DashBoard/index.js

export class DashBoard extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props) {
    super(props);
    this.state = {
      organizations: null,
    };
    this.rowCallback = this.rowCallback.bind(this);
  }

  render() {
    <MyChildComponent orgs={this.state.organizations} />
  }
}

components/MyChildComponent/index.js

export class MyChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    <div>
      {this.props.orgs}
    </div>
  }
}

这只是处理传入数据的一种方式。您还可以在逻辑组件之间路由时传递值，或者使用通量库redux来创建状态变量等。

请注意，我的代码摘录使用了 es6，并且需要一个 babel 编译器。我也更喜欢在可能的情况下为 UI 组件使用函数，因为我相信这是 React 的方式