Question

对于两个路径反应只渲染着陆组件。对于路径“/”和路径“/home”也一样。路由器只渲染登陆组件。

let i = 0;
function CompHook(props) {
  console.log(props.name + " CompHook render" + i);
  Promise.resolve().then(() => {
    i++;
    console.log(props.name + "  promise" + i);
  });

  React.useEffect(() => {
    console.log(props.name + "  useEffect");
    return () => console.log(props.name + "  useEffect destory");
  }, []);
  React.useLayoutEffect(() => {
    console.log(props.name + "  useLayoutEffect");
    return () => console.log(props.name + "  useLayoutEffect destory");
  }, []);

  return props.children || "A";
}

console.log(" start ...");


export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="App">
      <h1 onClick={() => setShow((t) => !t)}>Hello CodeSandbox</h1>
      {show && (
        <>
          <CompHook name="a"></CompHook>
        </>
      )}
    </div>
  );
}

Answer 1

可能是因为您使用了 2 个 Switch 组件，请改用一个

路由器为每个路由路径渲染相同的组件

1 个答案: