CODEWITHSUNDEEP
javascriptreactjsreact-router
Dana Chen
Dana Chen

Reputation: 216

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

Upvotes: 1

Views: 284

Answers (1)

Paul S
Paul S

Reputation: 36827

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.

Upvotes: 2

Related Questions