react实现点击路由跳转

使用 react-router-dom 实现路由跳转

安装 react-router-dom（若未安装）：

npm install react-router-dom

在根组件（如 App.js）中配置路由：

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>
      <Link to="/about">跳转到 About 页</Link>
    </div>
  );
}

通过编程式导航跳转

使用 useNavigate 钩子实现动态跳转（如点击按钮）：

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

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

  const handleClick = () => {
    navigate('/about'); // 跳转到 About 页
  };

  return (
    <button onClick={handleClick}>跳转到 About</button>
  );
}

跳转时传递参数

通过 state 或 URL 参数传递数据：

// 方法1：通过 state
navigate('/about', { state: { id: 123 } });

// 方法2：通过 URL 参数
navigate('/about?id=123');

在目标页面接收参数：

// 接收 state
import { useLocation } from 'react-router-dom';
const location = useLocation();
console.log(location.state?.id); // 123

// 接收 URL 参数
import { useSearchParams } from 'react-router-dom';
const [searchParams] = useSearchParams();
console.log(searchParams.get('id')); // "123"

动态路由跳转

配置动态路由参数：

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

跳转时传递动态参数：

navigate('/user/123');

在目标页面获取参数：

import { useParams } from 'react-router-dom';
const { id } = useParams(); // id = "123"