在 React 路由器中无需重新渲染即可更改 URL [英] URL change without re rendering in React router

问题描述

我正在开发一个应用程序，我需要在不导致重新渲染的情况下更改页面的 url.

I am working on an application where I need to change the url of the page without causing a re-render.

我正在调用以获取像这样的 componentDidMount 中的所有页面

I am making a call to fetch all the pages inside componentDidMount like this

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

拥有所有页面后，我想显示各个页面.例如.在 url 中，它必须类似于 /page/1/slug-for-page-1 和 /page/2/slug-for-page-2 基于状态变量 activePageNumber 和活动页面内容将被显示.相应的 slug 也应该在 url 上.

Once I have all the pages then I want to show the individual pages. For eg. in the url it has to be like /page/1/slug-for-page-1 and /page/2/slug-for-page-2 based on a state variable activePageNumber and the active page content will be displayed. Also the corresponding slug should be there on the url.

我尝试在 setState 之后添加回调，如下所示，但没有奏效.

I tried adding a callback after setState like below, but it didn't work.

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

我想添加一个子组件来管理 activePageNumber 状态，但我不确定这是否是最好的方法以及它是否会阻止重新渲染.

I thought of adding a child component to manage the activePageNumber state, but I am not sure if its the best way to do it and whether it'll prevent the re-render.

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

I can implement it such that each page make a separate request to the backend, but I wish to call it only once, and then update the url based on the active page number.

我不知道如何在 React 中实现这一点.

I am not sure how to implement this in react.

我有以下版本

react-router-dom":^5.0.0"

"react-router-dom": "^5.0.0"

反应":^16.8.6"

"react": "^16.8.6"

推荐答案

如果你像这样定义你的 /page 路由:

If you define your /page route like this:

<Route
  path="/page/:number"
  component={({ match }) => (
    <Pages activePageNumber={match.params.number} />
  )}
/>

Pages 组件方法 componentDidMount 将在您从例如 /home 切换到 /page/1 时被调用，但是当你从 /page/1 切换到 /page/2 时，不会被调用，因为里面的 DOM 元素/page/:number 路由保持相同的类型.我建议你阅读 React 关于 reconciliation 的文档以获得更好的解释.

The Pages component method componentDidMount will be called when you switch from, for example, /home to /page/1, but will not be called when you switch from /page/1 to /page/2, because the DOM elements inside the /page/:number Route remain of the same type. I suggest you read React's documentation on reconciliation for a better explaination.

因此您可以安全地将调用 /pages 服务放在 Pages 组件内，然后在其渲染方法中根据 /pages 显示您需要的页面代码>activePageNumber 属性.

So you can safely put the call to your /pages service inside of the Pages component, and then in its render method display the page you need based on the activePageNumber prop.

class Pages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pages: null,
    };
  }

  componentDidMount() {
    axios.get('/pages')
      .then(response => {
        this.setState({
          pages: response.data
        })
      });
  }

  render() {
    const { pages } = this.state;
    const { activePageNumber } = this.props;

    return pages ? (
      <Page page={pages[activePageNumber]} />
    ) : (
      <div>loading...</div>
    );
  }
}

这篇关于在 React 路由器中无需重新渲染即可更改 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！