推荐使用 React 的 Context API 作为解决方案，通过将路由信息传递给所有的子组件，避免了重新渲染整个组件树。

在父组件中创建一个 Context，将当前路由信息作为其状态，在子组件中使用 useContext 获取该信息。

示例代码：

// 父组件 import { useState, createContext } from 'react'; import { Router } from 'react-router-dom';

export const RouterContext = createContext();

const App = () => { const [location, setLocation] = useState({ pathname: '/' });

return ( { /* 嵌套的路由组件 */ } ); };

export default App;

// 子组件 import { useContext } from 'react'; import { Routes, Route } from 'react-router-dom'; import { RouterContext } from './App';

const HomePage = () => { const { location } = useContext(RouterContext);

return (

当前路径：{location.pathname}

const AboutPage = () => { const { location } = useContext(RouterContext);

return (

当前路径：{location.pathname}

const NestedRoutes = () => { return ( } /> } /> ); };

export default NestedRoutes;