React-router v4中URL参数跳转后浏览器前进后退功能失效求助

嘿，我来帮你搞定这个React Router和Semantic UI Pagination的头疼问题！咱们一步步来拆解解决方案：

方法一：直接把Semantic UI Pagination的项改成React Router Link（最推荐） #

其实Semantic UI的Pagination组件支持自定义渲染元素的类型，你完全可以把它的分页项直接渲染成react-router-dom的Link或NavLink，这样就不用绕弯子用Redirect了，而且路由跳转的逻辑完全符合React Router的预期，前进后退也会自动触发组件更新。

代码示例：

import { Link } from 'react-router-dom';
import { Pagination } from 'semantic-ui-react';
import { useParams } from 'react-router-dom';

function Blog() {
  // 假设你已经获取了总页数totalPages
  const totalPages = 10;
  // 从URL参数里取当前页码
  const { number } = useParams();
  const currentPage = parseInt(number, 10);

  return (
    <div>
      {/* 博客内容区域 */}
      <Pagination
        activePage={currentPage}
        totalPages={totalPages}
        // 指定用Link作为分页项的渲染组件
        itemAs={Link}
        // 给每个分页项设置对应的路由地址
        itemProps={(activePage) => ({
          to: `/blog/page/${activePage}`
        })}
      />
    </div>
  );
}

这样点击分页按钮时，直接通过React Router的Link跳转，URL变化后组件会接收到新的match.params，无论是手动跳转还是浏览器前进后退，都能自动触发组件的更新逻辑。

方法二：监听URL参数变化触发组件更新 #

如果暂时没法修改Pagination的渲染方式，那咱们可以在Blog组件里监听URL参数的变化，当参数更新时重新加载数据。

函数组件版本（用hooks） #

import { useParams, useEffect, useState, useHistory } from 'react-router-dom';
import { Pagination } from 'semantic-ui-react';

function Blog() {
  const { number } = useParams();
  const [posts, setPosts] = useState([]);
  const history = useHistory();
  const totalPages = 10;

  useEffect(() => {
    // 每次number变化时，重新获取对应页码的博客数据
    const fetchPosts = async () => {
      const response = await fetch(`/api/blog/page/${number}`);
      const data = await response.json();
      setPosts(data);
    };
    fetchPosts();
  }, [number]); // 依赖number参数，参数变化时执行副作用

  return (
    <div>
      {posts.map(post => <div key={post.id}>{post.title}</div>)}
      <Pagination
        activePage={parseInt(number, 10)}
        totalPages={totalPages}
        onPageChange={(e, { activePage }) => {
          // 用history.push跳转，替代Redirect方式
          history.push(`/blog/page/${activePage}`);
        }}
      />
    </div>
  );
}

类组件版本 #

import React from 'react';
import { withRouter } from 'react-router-dom';
import { Pagination } from 'semantic-ui-react';

class Blog extends React.Component {
  state = {
    posts: []
  };

  componentDidMount() {
    this.fetchPosts(this.props.match.params.number);
  }

  // 监听props变化，当URL参数number改变时重新获取数据
  componentDidUpdate(prevProps) {
    const prevPage = prevProps.match.params.number;
    const currentPage = this.props.match.params.number;
    if (prevPage !== currentPage) {
      this.fetchPosts(currentPage);
    }
  }

  fetchPosts = async (pageNumber) => {
    const response = await fetch(`/api/blog/page/${pageNumber}`);
    const data = await response.json();
    this.setState({ posts: data });
  };

  render() {
    const { number } = this.props.match.params;
    return (
      <div>
        {this.state.posts.map(post => <div key={post.id}>{post.title}</div>)}
        <Pagination
          activePage={parseInt(number, 10)}
          totalPages={10}
          onPageChange={(e, { activePage }) => {
            this.props.history.push(`/blog/page/${activePage}`);
          }}
        />
      </div>
    );
  }
}

// 用withRouter高阶组件注入history和match props
export default withRouter(Blog);

方法三：不推荐的popstate事件监听（尽量不用） #

虽然可以直接监听浏览器的popstate事件，但这种方式绕过了React Router的内置机制，容易出现状态不一致的问题，所以只作为备选方案：

import { useEffect, useState } from 'react';
import { useParams, useHistory } from 'react-router-dom';

function Blog() {
  const { number } = useParams();
  const history = useHistory();
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const handlePopState = () => {
      // 从当前路由中提取页码并重新获取数据
      const currentPage = history.location.pathname.split('/').pop();
      const fetchPosts = async () => {
        const response = await fetch(`/api/blog/page/${currentPage}`);
        const data = await response.json();
        setPosts(data);
      };
      fetchPosts();
    };

    window.addEventListener('popstate', handlePopState);
    // 组件卸载时移除监听
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  // ...其他渲染逻辑
}

总的来说，方法一是最优雅的解决方案，既符合React Router的设计理念，又不用额外处理组件更新的逻辑。如果因为某些限制没法用方法一，方法二也是稳定可靠的选择。

内容的提问来源于stack exchange，提问作者Who Knows