Reactjs 按路线取数

我在route/journal/：id上有一个页面，然后我想用这个“id”从api获取数据。我将fetch添加到componentDidMount中，但如果我已经在route/journal/:id的页面上，并从该页面使用到其他/journal/:id，则页面不会更改

似乎还有其他方法可以做到这一点。请帮忙

以下是代码：

//router page
<Route component={ListLayout}>
      <Route path="/journals" component={Journals} />
      <Route path="/journal/:id" component={Journal} />
      <Route path="/shelves" component={Shelves} />
</Route>


export default class Journal extends Component {



    state = {
        reader: false,
        journal: {}
      }

      componentWillMount(){
        const myHeaders = new Headers();

        myHeaders.append('X-User-Agent', '84e6f2c45955b65b');

        const myInit = { method: 'GET',
                       headers: myHeaders//,
                       //mode: 'cors',
                       //cache: 'default'
                     };

        const myRequest = new Request(`/issues/${this.props.location.pathname.split('/').pop()}`,
        myInit);
        fetch(myRequest)
          .then(response => {
            return response.json();
           })
          .then(data => {
            console.log(data);
            this.setState({journal: data.data});
          })
          .catch( console.log );
      }
    render() {
        let { journal } = this.state;
    <div className="JournalPage__Title">{journal.magazine_title}</div>
                  <div className="JournalPage__Description">{journal.description}</div>
    <Link to="/journal/432">Test fetch</Link>
    }

}

//路由器页面
导出默认类日志扩展组件{
状态={
读者：错，
日记账：{}
}
组件willmount（）{
const myHeaders=新的头（）；
append（'X-User-Agent'，'84e6f2c45955b65b'）；
const myInit={method:'GET'，
标题：myHeaders/，
//模式：“cors”，
//缓存：“默认”
};
const myRequest=new Request（`/issues/${this.props.location.pathname.split（'/'）.pop（）}`，
肌炎）；
获取（myRequest）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
控制台日志（数据）；
this.setState（{journal:data.data}）；
})
.catch（console.log）；
}
render（）{
让{journal}=this.state；
{journal.magazine_title}
{journal.description}
测试获取
}
}

当您仅更改参数时，组件不会再次加载，但它已收到新的道具，因此您需要在执行参数检查后再次从componentWillReceiveProps调用API。我将把代码重构成这样

另外，您可以使用

this.props.location.params

直接获取路径参数。如果您使用的是react router v4，请参阅关于如何从路径获取参数的回答

导出默认类日志扩展组件{
状态={
读者：错，
日记账：{}
}
组件willmount（）{
APIRequest（this.props.location.params）；
}
组件将接收道具（下一步）{
const{params:nextrams}=nextProps.location；
const{params}=this.props.location；
if（params.id！==nextParams.id）{
APIRequest（nextParams.id）；
}
}
APIRequest=（id）=>{
const myHeaders=新的头（）；
append（'X-User-Agent'，'84e6f2c45955b65b'）；
const myInit={method:'GET'，
标题：myHeaders/，
//模式：“cors”，
//缓存：“默认”
};
const myRequest=新请求（`/issues/${id}`，
肌炎）；
获取（myRequest）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
控制台日志（数据）；
this.setState（{journal:data.data}）；
})
.catch（console.log）；
}
render（）{
让{journal}=this.state；
{journal.magazine_title}
{journal.description}
测试获取
}
}

当您仅更改参数时，组件不会再次加载，但它已收到新的道具，因此您需要在执行参数检查后再次从componentWillReceiveProps调用API。我将把代码重构成这样

另外，您可以使用

this.props.location.params

直接获取路径参数。如果您使用的是react router v4，请参阅关于如何从路径获取参数的回答

导出默认类日志扩展组件{
状态={
读者：错，
日记账：{}
}
组件willmount（）{
APIRequest（this.props.location.params）；
}
组件将接收道具（下一步）{
const{params:nextrams}=nextProps.location；
const{params}=this.props.location；
if（params.id！==nextParams.id）{
APIRequest（nextParams.id）；
}
}
APIRequest=（id）=>{
const myHeaders=新的头（）；
append（'X-User-Agent'，'84e6f2c45955b65b'）；
const myInit={method:'GET'，
标题：myHeaders/，
//模式：“cors”，
//缓存：“默认”
};
const myRequest=新请求（`/issues/${id}`，
肌炎）；
获取（myRequest）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
控制台日志（数据）；
this.setState（{journal:data.data}）；
})
.catch（console.log）；
}
render（）{
让{journal}=this.state；
{journal.magazine_title}
{journal.description}
测试获取
}
}

我是从那一页来到这里的，那是什么mean@ShubhamKhatri如果我已经在route/journal/:id的页面上，并使用从该页面到其他/journal/:id的页面，我需要在route上的时间

精确
道具。我从该页面来到这里，这是什么意思mean@ShubhamKhatri如果我已经在route/journal/:id页面上，并从该页面使用到其他/journal/:id页面，请查看我在route上需要的时间
确切的
道具。谢谢您的回答。不确定，但我想当时它是由路线上的
exact
prop解决的。谢谢你的回答。不确定，但我想当时它是由路线上的
exact
prop解决的。