Next.js 路由器：如何在 url 更改页面刷新？

Question

我有一个页面，用户可以使用过滤器缩小搜索范围。 问题在于，当用户单击过滤器以按“租”或“购买”过滤属性时，url 不会刷新以反映更改。 然而，更改确实出现在 URL 中，这正是我想要的，但我必须手动按 Enter 以使用指定的过滤器刷新页面，这样才会出现更改。

正如您在照片中看到的，列出的属性不是“出租”属性，因此正确查看出租属性的唯一方法是手动输入 url： http://localhost:3000/search?purpose=for-rent&minPrice=20000

import {
  Flex,
  Select,
  Box,
} from "@chakra-ui/react";
import { useRouter } from "next/router";
import Image from "next/image";
import { filterData, getFilterValues } from "../utils/filterData";

class searchFilters extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filters: filterData,
    };
  }

  handleChange = (filterValues) => {
    const path = this.props.params.pathname;
    const { query } = this.props.params;
    const values = getFilterValues(filterValues);
    values.forEach((item) => {
      if (item.value && filterValues?.[item.name]) {
        query[item.name] = item.value;
      }
    });
    this.props.params.push({ pathname: path, query: query });
  };

  render() {
    const { filters } = this.state;
    return (
      <Flex bg="gray.100" p="4" justifyContent="center" flexWrap="wrap">
        {filters.map((filter) => (
          <Box key={filter.queryName}>
            <Select
              placeholder={filter.placeholder}
              w="fit-content"
              p="2"
              onChange={(e) =>
                this.handleChange({ [filter.queryName]: e.target.value })
              }
            >
              {filter.items.map((item) => (
                <option value={item.value} key={item.value}>
                  {item.name}
                </option>
              ))}
            </Select>
          </Box>
        ))}
      </Flex>
    );
  }
}

const withParams = (Component) => {
  return (props) => <Component {...props} params={useRouter()} />;
};

export default withParams(searchFilters);

Answer 1

当您使用相同的组件时，它不会重新加载页面。 您可以使用useEffect挂钩检测参数更改并在其中添加 refreshig 逻辑。 这将根据新参数重新加载数据。

const { query } = useRouter();

useEffect(() => {
  // Refresh logic
}, [query.purpose)]);