Javascript react router如何使用<；将道具传递给其他组件；链接>；及<；路线>；？

我有一个select输入，可以在PageA1中生成一个新国家的值。我想将此值传递给PageB。但控制台将发出警告：

[react router]您无法更改；当我选择newCountry时，它将被忽略

如何使用

和

传递newCountry的值

PageA.js：

 export default class PageA extends Component{
      constructor(props){
        super(props);
        this.state = {
          country:''
        }
      }

  // 收取country的callback
  selectCountry = (newCountry)=>{
    this.setState({country:newCountry});
    this.props.callbackPageA(newCountry);
  }

  render(){
    return(
      <div>
        <div>
          <PageA1 callbackCountry={this.selectCountry} />
        </div>
      </div>
    );
  }
}

导出默认类PageA扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国家：''
}
}
// 收取国家的回拨
选择国家=（新国家）=>{
this.setState（{country:newCountry}）；
this.props.callbackPageA（newCountry）；
}
render（）{
返回(
);
}
}

我的路由器App.js：

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      country:''
    }
  }
  PageAValue = (newCountry) =>{
    this.setState({
      country:newCountry
    })
  }
  render () {
    const CountryProps = this.state.country;
    console.log('app '+CountryProps);
    return(
      <Router history={browserHistory}>
        <Route path="/" component={HomePage}></Route>
        <Route path="/PageA" component={() => <PageA callbackPageA={this.PageAValue}/>}></Route>
        <Route path="/PageB" component={PageB}  CountryProps={CountryProps}>
        </Route>
      </Router>
    )
  }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
国家：''
}
}
PageAValue=（新国家）=>{
这是我的国家({
国家：新国家
})
}
渲染（）{
const CountryProps=this.state.country；
console.log（'app'+CountryProps）；
返回(
}>
)
}
}

PageB.js：

export default class PageB extends React.Component {
  constructor(props){
    super(props);
  }
  render () {
    const country = this.props.route.CountryProps;
    console.log('corepage ' + country);

    return(
      <div>
        <div>
          <div><PageD country={country}/></div>
        </div>
      </div>
    )
  }
}

导出默认类PageB扩展React.Component{
建造师（道具）{
超级（道具）；
}
渲染（）{
const country=this.props.route.CountryProps；
console.log（'corepage'+国家/地区）；
返回(
)
}
}

您可以将状态附加到。例如，您可以将

的

to

道具定义为：

<Link to={{ pathname: '/PageB', state: { country: 'Ireland' }}} />

然后在您的

PageB

组件中，

位置将作为

组件纯粹用于配置，实际上并没有呈现，这就是为什么您会收到该警告