当前位置：首页 > React

react如何跳转新页面跳转

2026-01-26 01:30:16React

使用React Router进行页面跳转

React应用中通常使用React Router库实现页面跳转。安装React Router DOM：

npm install react-router-dom

在入口文件（如index.js）中配置路由：

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

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

编程式导航跳转

在组件中使用useNavigate钩子进行跳转：

react如何跳转新页面跳转

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

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

  const handleClick = () => {
    navigate('/new-page'); // 跳转到新页面
    navigate('/new-page', { replace: true }); // 替换当前路由
    navigate(-1); // 返回上一页
  };

  return <button onClick={handleClick}>跳转</button>;
}

声明式导航跳转

使用<Link>组件实现声明式导航：

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

function Nav() {
  return (
    <Link to="/new-page">跳转到新页面</Link>
  );
}

带参数跳转

传递参数到新页面：

react如何跳转新页面跳转

// 跳转时传递参数
navigate('/new-page', { state: { id: 123 } });

// 新页面接收参数
import { useLocation } from 'react-router-dom';

function NewPage() {
  const location = useLocation();
  const { id } = location.state || {};
}

动态路由跳转

配置动态路由：

<Route path="/user/:id" element={<UserPage />} />

// 跳转到动态路由
navigate('/user/123');

重定向跳转

使用<Navigate>组件实现重定向：

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

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