React如何做路由监听?

在React中，路由监听通常是通过React Router库来实现的。React Router是一个强大的路由库，它允许你根据URL的不同部分来渲染不同的组件。然而，React Router本身并不直接提供路由监听的功能。但你可以通过监听浏览器历史对象（history object）的变化来实现类似的效果。

以下是一个使用React Router和浏览器历史对象进行路由监听的基本示例：

首先，确保你已经安装了React Router。你可以使用npm或yarn来安装：

	npm install react-router-dom
	# 或者
	yarn add react-router-dom

然后，在你的React组件中，你可以使用useHistory钩子来访问浏览器历史对象，并监听其变化。例如：

	import React, { useEffect } from 'react';
	import { useHistory } from 'react-router-dom';
	function MyComponent() {
	const history = useHistory();
	useEffect(() => {
	return history.listen((location) => {
	console.log(`You just navigated to ${location.pathname}`);
	});
	}, [history]);
	return (
	<div>
	{/* 你的组件内容 */}
	</div>
	);
	}

在这个示例中，useHistory钩子返回一个包含listen方法的历史对象。你可以调用listen方法来注册一个回调函数，该回调函数会在路由发生变化时被调用。回调函数接收一个包含当前路由信息的location对象作为参数。

请注意，useEffect钩子中的依赖项数组包含了history对象。这是因为我们只想在history对象发生变化时（即组件重新挂载时）设置监听器。如果省略了依赖项数组，React会在每次渲染时都设置一个新的监听器，这可能会导致性能问题。

另外，如果你使用的是函数式组件和Hooks，你还可以考虑使用useLocation钩子来直接获取当前的路由信息，而无需监听路由变化。这取决于你的具体需求。