Using same component on different routes

[benbonnet]

Hi; went through the issues but could not really find out :/

I have a component that renders a list, this list can be filtered (/items, /items/campaigns, /items/posts, etc...) using react-router. Each 'url filter' should call an api endpoint with specific params and obviously re-render the (same) component listing the correct items after the request

Some code here :

@resolve("items", function(props){
  var url           = "/items/" + props.params.item_type
  return axios.get(url).then((response) => response.data
})
export default class ItemsList extends Component {
  render(){
    const { items } = this.props;
    var list = items.map(function(item){
      return(<h1>{item.title}</h1>)
    })
    return(
      <div className="list">{list}</div>
    )
  }
})

I can get react-resolver return the results when reaching the page server side, but then if i navigate from one to another 'url-filter', nothing happens. I see that componentWillReceivePropsis triggered, but react-resolver won't fetch again the correct data.

I was wondering if it was to be expected, happy to be notified if I was using it wrong (assuming I've been clear enough in the use case I'm exposing above). best

[monder]

It should work.
Where exactly is componentWillReceiveProps is triggered? In ItemsList component?
If props change it should fetch the new url.
The example does implement similar thing, no?

[benbonnet]

Hmm… Im still not that convinced yet :/

Having this :

@resolve("item", function(props){
  var url           = "/item/" + props.params.slug
  return axios.get(url).then((response) => response.data
})
export default class ItemsList extends Component {
  render(){
    const { item } = this.props;
    return(
      <ChildComponent item={item}>
    )
  }
})

I think I had the same problem on the initial question.
As you said it was not explicit enough, hope it is here

If I was on /item/xxx and that I go to /item/zzz, @resolve is triggered, I do get a new render for the component, but the child component will not receive the new prop — which feels buggy. The componentWillReceiveProps of the child is not triggered. So it differs from the example you're pointing out as i'm using (maybe by mistake) a child component

I first though it was simply the fact of using a const on the proptype before returning the render, but i might just have been wrong thinking that

[TriPSs]

@bbnnt When the url changes you should check that in the componentWillReceiveProps and then refetch the data like this:

@resolve('company', (props) => {
  const { companySlug } = props.params

  return props.getCompany(companySlug).then(payload => payload)
})
export class Company extends React.Component {

  componentWillReceiveProps(nextProps) {
    const { params: { companySlug }, getCompany }     = this.props
    const { params: { companySlug: newCompanySlug } } = nextProps

    if (newCompanySlug !== companySlug)
      getCompany(newCompanySlug)
  }
}

componentWillReceiveProps Got called because the route changes so the param attribute is being updated.

In my example getCompany is a function the container connects to the component.