在 React 中獲取當前路由信息，根據使用的路由庫不同（如 React Router v5/v6 或 Next.js），方法也有所區別。以下是常見場景的解決方案：

---

1. 使用 React Router v6

獲取當前路徑（pathname）、查詢參數（search）等

import { useLocation, useParams, useSearchParams } from 'react-router-dom';function MyComponent() {// 獲取路徑信息（如 /users/123?name=foo）const location = useLocation();console.log(location.pathname); // "/users/123"console.log(location.search);   // "?name=foo"// 獲取動態路由參數（如 /users/:id）const params = useParams();console.log(params.id); // "123"// 獲取查詢參數（URLSearchParams 對象）const [searchParams] = useSearchParams();console.log(searchParams.get('name')); // "foo"return <div>Current Path: {location.pathname}</div>;
}

獲取路由匹配信息

import { useMatch } from 'react-router-dom';// 檢查當前路由是否匹配某個路徑
const match = useMatch('/users/:id');
if (match) {console.log(match.params.id); // 動態參數
}

---

2. 使用 React Router v5

獲取路由信息

import { useLocation, useParams, useRouteMatch } from 'react-router-dom';function MyComponent() {const location = useLocation();const params = useParams();const match = useRouteMatch();console.log(location.pathname); // 當前路徑console.log(params);            // 動態參數console.log(match.url);         // 匹配的URLreturn <div>Current Route: {location.pathname}</div>;
}

類組件中獲取路由

import { withRouter } from 'react-router-dom';class MyComponent extends React.Component {render() {const { location, match, params } = this.props;return <div>Path: {location.pathname}</div>;}
}export default withRouter(MyComponent);

---

3. 在 Next.js 中獲取路由

Pages Router（傳統方式）

import { useRouter } from 'next/router';function MyComponent() {const router = useRouter();// 獲取完整路由信息console.log(router.pathname); // "/posts/[id]"console.log(router.query);    // { id: "123" }（動態參數 + 查詢參數）console.log(router.asPath);   // "/posts/123?name=foo"（瀏覽器顯示的實際路徑）return <div>Current Page: {router.pathname}</div>;
}

App Router（Next.js 13.4+）

// 在 Server Component 中
import { usePathname, useSearchParams } from 'next/navigation';export default function Page() {const pathname = usePathname();       // "/dashboard"const searchParams = useSearchParams(); // URLSearchParams 對象return <div>Path: {pathname}</div>;
}

---

4. 獲取當前路由的額外場景

獲取路由的 basename

// React Router v6
import { useMatches } from 'react-router-dom';
const matches = useMatches();
console.log(matches[0].pathname); // 包含 basename 的完整路徑// Next.js (需手動處理)
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';

監聽路由變化

// React Router
useEffect(() => {const unlisten = history.listen((update) => {console.log('Route changed to:', update.location.pathname);});return unlisten; // 清理監聽
}, []);// Next.js
useEffect(() => {router.events.on('routeChangeComplete', (url) => {console.log('Route changed to:', url);});
}, [router]);

---

5. 常見問題解決

問題：路由信息未更新

• 原因：組件未被路由上下文包裹。
• 解決：確保組件在 <BrowserRouter> 或 <Router> 內部：

  // 根組件中
  import { BrowserRouter } from 'react-router-dom';
  ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root')
  );
  

問題：Next.js 中 router.query 初始為空

• 原因：靜態優化導致首次渲染時無參數。
• 解決：添加加載狀態判斷：

  if (!router.isReady) return <div>Loading...</div>;
  

---

總結：按需選擇方法

場景	推薦 API	示例
React Router v6	useLocation, useParams	const { pathname } = useLocation()
React Router v5	withRouter, useRouteMatch	export default withRouter(MyComponent)
Next.js Pages	next/router	const router = useRouter()
Next.js App Router	next/navigation	const pathname = usePathname()
獲取查詢參數	useSearchParams (React Router)	const [params] = useSearchParams()
監聽路由變化	history.listen 或 Next.js 事件	router.events.on('routeChangeComplete', ...)

根據你的路由庫選擇對應方法即可準確獲取當前路由信息！