使用react如何跳转页面

使用React Router进行页面跳转

React中实现页面跳转通常使用react-router-dom库，以下是具体实现方法：

安装react-router-dom：

npm install react-router-dom

声明式导航（使用Link组件）

在需要跳转的地方使用Link组件：

import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

编程式导航（使用useNavigate钩子）

在函数组件中使用useNavigate进行编程式导航：

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 跳转到指定路径
    navigate('/profile');

    // 带参数跳转
    navigate('/user/123');

    // 替换当前历史记录
    navigate('/login', { replace: true });

    // 带state跳转
    navigate('/dashboard', { state: { from: 'home' } });
  };

  return <button onClick={handleClick}>Go to Profile</button>;
}

路由配置

在应用入口文件中配置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/user/:id" element={<UserPage />} />
      </Routes>
    </Router>
  );
}

动态路由参数获取

在目标页面组件中获取路由参数：

import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

重定向

使用Navigate组件实现重定向：

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isLoggedIn }) {
  return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}

404页面处理

在路由配置最后添加404路由：

<Route path="*" element={<NotFoundPage />} />

以上方法涵盖了React中页面跳转的主要场景，根据具体需求选择合适的方式即可。