[英]How does react-router pass params to other components via props?
[英]How does react-router pass props to other components with <Links> and <Route>?
我有一个选择输入来在PageA1中创建newCountry的值。我想将此值传递给PageB。但是控制台会警告: [react-router] You cannot change <Router routes>; it will be ignored
当我选择newCountry时[react-router] You cannot change <Router routes>; it will be ignored
。
如何使用<Links>
和<Route>
传递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>
);
}
}
我的路由器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>
)
}
}
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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.