如何在路径更改时重新呈现React组件？

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

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

  useEffect(() => {
    // 在路径变化时执行的操作
    // 可以在这里重新呈现组件或执行其他逻辑
    console.log('路径变化了');
  }, [location]);

  return (
    // 组件的 JSX 代码
    <div>My Component</div>
  );
}

import { createContext, useContext, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const PathContext = createContext('');

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

  useEffect(() => {
    // 在路径变化时更新Context的值
    PathContext.Provider({ path: location.pathname });
  }, [location]);

  return (
    // 使用Context中的路径信息
    <PathContext.Consumer>
      {path => <div>{path}</div>}
    </PathContext.Consumer>
  );
}