react实现路由跳转
React 路由跳转实现方法
在 React 中实现路由跳转通常使用 react-router-dom 库（适用于 Web 应用）。以下是常见的几种方式：
使用 Link 组件导航
Link 是声明式导航方式，通过组件形式实现跳转：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">跳转到 About 页</Link>
);
}使用 useNavigate Hook（函数式跳转）
适用于事件触发或条件跳转：
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 基础路径
navigate('/about', { replace: true }); // 替换当前历史记录
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}编程式导航（类组件）
对于类组件，可通过 withRouter 高阶组件或 history 对象实现：
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/about');
};
render() {
return <button onClick={this.handleClick}>跳转</button>;
}
}
export default withRouter(MyComponent);路由传参方式
URL 参数：
navigate('/user/123'); // 定义路由：path="/user/:id"查询参数：
navigate('/search?keyword=react'); // 通过 useLocation().search 获取状态传参：
navigate('/detail', { state: { id: 1 } }); // 通过 useLocation().state 获取重定向操作
使用 Navigate 组件实现条件重定向：
import { Navigate } from 'react-router-dom';
function ProtectedPage({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" replace />;
}注意事项
- 确保已安装最新版
react-router-dom：npm install react-router-dom@6 - 路由配置需在根组件包裹
<BrowserRouter>：import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
, document.getElementById('root') ); ``` 3. 动态路由参数通过 `useParams()` Hook 获取。
