React Router Link跳转Perfil页面仅首次生效，后续URL变更但页面不渲染

使用Material-UI的Autocomplete组件结合React Flux实现搜索用户的搜索栏，每个选项是指向用户详情页的链接。首次点击选项时功能正常，但后续点击仅变更URL，页面不会重新渲染。

1. 清理SearchBar组件的冗余逻辑 #

你的SearchBar中存在不必要的url状态和依赖它的useEffect，这会导致错误的URL拼接和不必要的接口请求，修改如下：

export function SearchBar() {
  const { store, actions } = useContext(Context);

  // 组件挂载时仅调用一次search获取所有艺术家列表
  useEffect(() => {
    actions.search();
  }, []);

  const artistas = store.artistas.slice();

  return (
    <Autocomplete
      id="autocomplete"
      freeSolo
      disableClearable
      options={artistas}
      getOptionLabel={(option) => `${option.nombre} ${option.apellido}`}
      renderOption={(option) => (
        <Link
          className="text-black text-decoration-none"
          to={`/perfil/${option.id}`}
        >
          {option.nombre} {option.apellido}
        </Link>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          size="small"
          placeholder="Search for your artist"
          margin="normal"
          variant="outlined"
          InputProps={{ ...params.InputProps, type: "search" }}
        />
      )}
    />
  );
}

2. 让Perfil组件响应URL参数变化 #

从一个用户详情页跳转到另一个时，Perfil组件不会重新挂载，只会更新user_id参数，需要监听参数变化触发数据更新：

方法一：在Perfil中监听user_id变化 #

如果About和Galeria依赖用户详情数据，可在Perfil中触发数据获取：

import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useContext } from 'react';
import { Context } from '../your-context-path'; // 替换为你的Context实际路径

export const Perfil = () => {
  const { user_id } = useParams();
  const { actions } = useContext(Context);

  // 当user_id变化时，重新获取该用户详情
  useEffect(() => {
    actions.fetchUserDetail(user_id);
  }, [user_id, actions]);

  return (
    <>
      <About user_id={user_id} />
      <Galeria user_id={user_id} />
    </>
  );
};

方法二：子组件内部监听props变化 #

如果About/Galeria自行请求数据，需在子组件中监听user_id变化：

// About组件示例
export const About = ({ user_id }) => {
  const [userData, setUserData] = useState({});
  const { actions } = useContext(Context);

  useEffect(() => {
    actions.fetchUserDetail(user_id).then(data => {
      setUserData(data);
    });
  }, [user_id, actions]);

  // 渲染用户详情内容...
};

3. 新增Flux Action获取单个用户详情 #

当前search仅获取艺术家列表，需新增action获取单个用户数据：

// Flux actions中添加
fetchUserDetail: async (userId) => {
  try {
    const response = await fetch(
      `${process.env.BACKEND_URL}/api/artistas/${userId}`
    );
    const data = await response.json();
    setStore({
      currentUser: data, // 在store中新增currentUser字段存储当前用户数据
    });
  } catch (error) {
    console.log("Error loading user detail", error);
  }
}

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