react如何获取路由
获取当前路由信息
在React中获取当前路由信息通常需要使用路由库提供的钩子或API。以下是几种常见方法：
使用React Router v6
React Router v6提供了useLocation和useParams等钩子来获取路由信息：
import { useLocation, useParams } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
const params = useParams();
console.log('当前路径:', location.pathname);
console.log('查询参数:', location.search);
console.log('路由参数:', params);
}使用React Router v5
在React Router v5中可以通过props或hooks获取路由信息：
// 类组件方式
class MyComponent extends React.Component {
render() {
const { match, location } = this.props;
console.log('路由参数:', match.params);
console.log('路径:', location.pathname);
}
}
// 函数组件方式
function MyComponent() {
const match = useRouteMatch();
const location = useLocation();
}获取查询参数
处理URL查询字符串可以使用URLSearchParams：
const query = new URLSearchParams(location.search);
const id = query.get('id');
const page = query.get('page');动态路由参数获取
定义动态路由时，参数会自动注入到match.params中：
<Route path="/users/:id" component={UserComponent} />
// 在组件中
const { id } = useParams(); // v6
// 或
const { id } = props.match.params; // v5编程式导航
需要手动导航时可以使用useNavigate(v6)或useHistory(v5)：
// v6
const navigate = useNavigate();
navigate('/new-path');
// v5
const history = useHistory();
history.push('/new-path');注意事项
- 确保组件被包裹在
<Router>组件内 - 类组件需要使用withRouter高阶组件(v5)才能访问路由props
- v6中移除了withRouter，推荐使用hooks替代
