当前位置：首页 > React

react实现点击跳转

2026-01-26 23:41:02React

使用 react-router-dom 实现页面跳转

安装 react-router-dom 依赖包

npm install react-router-dom

在根组件中配置路由

react实现点击跳转

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

使用 Link 组件实现跳转

在组件中使用 Link 进行导航

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

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">Go to About</Link>
    </div>
  );
}

编程式导航实现跳转

使用 useNavigate 钩子进行编程式导航

react实现点击跳转

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

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

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

带参数的跳转方式

传递参数进行跳转

// 传递参数
navigate('/user', { state: { id: 123 } });

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

function User() {
  const location = useLocation();
  const { id } = location.state;
  return <div>User ID: {id}</div>;
}

使用 NavLink 实现高亮导航

NavLink 可以自动添加 active 类名

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

function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/" 
        style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}
      >
        Home
      </NavLink>
      <NavLink 
        to="/about" 
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        About
      </NavLink>
    </nav>
  );
}