Dana Chen Dana Chen - 6 days ago 7
React JSX Question

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
when I select newCountry .

How can I use
<Links>
and
<Route>
to pass the newCountry's Value?

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:

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>
)
}
}

Answer

You can attach state to the location descriptor. For example you can define the to prop for a <Link> as:

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

Then in your PageB component, the location will be available as a prop.

The <Route> components are purely for configuration and aren't actually rendered, which is why you are getting that warning.