alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
https://ice.work
MIT License
17.83k stars 2.09k forks source link

使用history进行跳转的时候报错 #6911

Closed sunshineLi2019 closed 3 months ago

sunshineLi2019 commented 3 months ago

Describe the bug

image 当我在useffect外部使用history进行路由跳转的时候产生了一个错误,警告我有一个不正常的setstate

Expected behavior

期望不会产生这个报错. 我期望了解到为什么会产生这个报错,是因为history还没加载好造成的吗?可是页面仍然可以正常跳转

Actual behavior

我期望前端处理由于localhost:3000/login和localhost:3000/login/造成的差异的时候,在入口layout.tsx处做了判断path的处理代码如下

import { Outlet, useLocation, history } from "ice";
import { App } from "antd";

function Layout() {
  const location = useLocation();

  console.log(111);
  // useEffect(() => {
  //   if (["/login/"].includes(location.pathname)) {
  //     history?.push("/login");
  //   }
  // }, []);
  if (["/login/"].includes(location.pathname)) {
    history?.push("/login");
  }
  return <Outlet />;
}

export default () => {
  return (
    <App>
      <Layout />
    </App>
  );
};

你可以看到我注释起来的部分,当我将跳转的过程放在useEffect中,这个报错便消失了

Version of ice.js

3.4.8

Content of build.json or ice.config.mts

import { defineConfig } from "@ice/app";
import request from "@ice/plugin-request";
import store from "@ice/plugin-store";
import auth from "@ice/plugin-auth";
import i18n from "@ice/plugin-i18n";
import antd from "@ice/plugin-antd";
// The project config, see https://v3.ice.work/docs/guide/basic/config
const minify = process.env.NODE_ENV === "production" ? "swc" : false;
export default defineConfig(() => ({
  ssg: false,
  minify,
  routes: {
    ignoreFiles: [
      "**/pages/**", // 如果每个页面下有 pages 目录存放当前页面的子页面,可以通过添加此配置忽略被解析成路由组件
      "**/components/**", // 如果每个页面下有 components 目录存放当前页面的组件,可以通过添加此配置忽略被解析成路由组件
      "**/services/**", // 如果每个页面下有 services 目录存放当前页面的组件,可以通过添加此配置忽略被解析成路由组件
    ],
  },
  plugins: [
    request(),
    store(),
    auth(),
    i18n({
      locales: ["zh-CN"],
      defaultLocale: "zh-CN",
    }),
  ],
  compileDependencies: false,

}));

Additional context

No response

ClarkXia commented 3 months ago

推荐在 useEffect 里使用路由跳转,类似 https://reactrouter.com/en/main/hooks/use-navigate

sunshineLi2019 commented 3 months ago

推荐在 useEffect 里使用路由跳转,类似 https://reactrouter.com/en/main/hooks/use-navigate @ClarkXia 我期望知道为什么会出现这个问题呢

ClarkXia commented 3 months ago

搜索那个状态的错误提示 会有 react 一些官方文档说明