reactjs - URL 更改无需在 React 路由器中重新渲染

Question

我正在开发一个应用程序，我需要更改页面的 url 而不会导致重新渲染。

我正在调用以获取 componentDidMount 内的所有页面，如下所示

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 上。

我尝试在 setState 之后添加回调，如下所示，但没有成功。

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

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

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

我不知道如何在 react 中实现这个。

我有以下版本

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

"react": "^16.8.6"

Answer 1

如果您定义 /page路线如下:

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

Pages成分法componentDidMount例如，当您从/home切换时将被调用至/page/1 ，但是当您从 /page/1 切换时不会被调用至/page/2 ，因为 /page/:number 内的 DOM 元素路线保持相同类型。我建议你阅读 React 的文档 reconciliation以获得更好的解释。

这样您就可以安全地调用您的 /pages Pages内的服务组件，然后在它的render方法中根据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>
    );
  }
}