Question

我正在开发一个需要更改页面URL而不引起重新渲染的应用程序。

我正在打电话以这样的方式获取componentDidMount内部的所有页面

componentDidMount() {    
    axios.get('/pages')
      .then(response => {
        this.setState({
          pages: response.data,
          slugs: response.data.pages.map(item => Slug(item.title))
        })
      })

一旦我拥有所有页面，那么我想显示各个页面。例如。在网址中，它必须类似于/page/1/slug-for-page-1和/page/2/slug-for-page-2（基于状态变量activePageNumber），并且将显示活动页面内容。 URL上也应有相应的段。

我尝试在setState之后添加一个回调，如下所示，但这没有用。

() => this.props.history.push({
          pathName: '/page',
          state: {activePageNumber : activePageNumber},
        })

我曾考虑添加一个子组件来管理activePageNumber状态，但是我不确定这是否是实现此目的的最佳方法，并且不确定是否会阻止重新呈现。

我可以实现它，以便每个页面都向后端发出一个单独的请求，但是我只希望调用一次，然后根据活动页面号来更新url。

我不确定如何在React中实现这一点。

我有以下版本

“ react-router-dom”：“ ^ 5.0.0”

“反应”：“ ^ 16.8.6”

Answer 1

如果您这样定义<span class="prop" data-name></span> <span class="prop" data-age></span>路线：

/page

例如，当您从<Route path="/page/:number" component={({ match }) => ( <Pages activePageNumber={match.params.number} /> )} />切换到Pages时，将调用componentDidMount组件方法/home，但 not 从/page/1切换到/page/1时调用，因为/page/2路由内的DOM元素保持相同的类型。我建议您阅读reconciliation上的React文档，以获得更好的解释。

因此，您可以安全地将对/page/:number服务的调用放在/pages组件内部，然后在其render方法中基于Pages道具显示所需的页面。 / p>

activePageNumber

URL更改而无需在React Router中重新呈现

1 个答案: