[英]How does react-router pass props to other components with <Links> and <Route>?
I have a select input to make a newCountry's Value in PageA1.And I want to pass this value to PageB .But the console will warning: [react-router] You cannot change <Router routes>; it will be ignored
我有一个选择输入来在PageA1中创建newCountry的值。我想将此值传递给PageB。但是控制台会警告:
[react-router] You cannot change <Router routes>; it will be ignored
[react-router] You cannot change <Router routes>; it will be ignored
when I select newCountry . 当我选择newCountry时
[react-router] You cannot change <Router routes>; it will be ignored
。
How can I use <Links>
and <Route>
to pass the newCountry's Value? 如何使用
<Links>
和<Route>
传递newCountry的值?
PageA.js: 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>
);
}
}
My router App.js: 我的路由器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: 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>
)
}
}
You can attach state to the location descriptor . 您可以将state附加到位置描述符 。 For example you can define the
to
prop for a <Link>
as: 例如,你可以定义
to
支撑用于<Link>
为:
<Link to={{ pathname: '/PageB', state: { country: 'Ireland' }}} />
Then in your PageB
component, the location
will be available as a prop . 然后在您的
PageB
组件中,该location
将作为prop可用。
The <Route>
components are purely for configuration and aren't actually rendered, which is why you are getting that warning. <Route>
组件纯粹是用于配置,实际上并未呈现,这就是为什么您收到该警告的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.