react 通过js实现跳转
使用 react-router-dom 进行编程式导航
在 React 中，可以通过 react-router-dom 提供的 useNavigate Hook 实现编程式导航。安装 react-router-dom 后，在函数组件中调用 useNavigate 获取导航函数：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path'); // 跳转到指定路径
};
return <button onClick={handleClick}>跳转</button>;
}使用 history.push（适用于 Class 组件）
在 Class 组件中，可以通过 withRouter 高阶组件或直接访问 props.history 实现跳转：
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/target-path');
};
render() {
return <button onClick={this.handleClick}>跳转</button>;
}
}
export default withRouter(MyComponent);通过 window.location 实现非路由跳转
如果需要完全跳转页面（而非单页应用内的路由切换），可以直接修改 window.location：
const handleRedirect = () => {
window.location.href = 'https://example.com'; // 完整 URL
};动态路径与参数传递
通过 navigate 或 history.push 可以传递参数：
navigate('/user', { state: { id: 123 } }); // 通过 state 传递
navigate('/user/123'); // 通过路径参数传递注意事项
- 使用
react-router-dom前需确保项目已配置路由（如<BrowserRouter>）。 window.location会导致页面刷新，仅适用于非单页应用场景。- 路径参数需与路由配置匹配（如
<Route path="/user/:id" />）。
