react点击实现路由切换
使用 React Router 实现点击路由切换
在 React 中实现点击切换路由，通常需要借助 react-router-dom 库。以下是具体实现方法：
安装 react-router-dom
确保项目已安装最新版本的 react-router-dom：
npm install react-router-dom基本路由配置
在根组件（如 App.js）中配置路由：
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}使用 Link 组件导航
Link 组件是推荐的路由切换方式：
<Link to="/path">Click to navigate</Link>编程式导航
通过 useNavigate Hook 实现点击事件触发路由跳转：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/target-path')}>
Go to Target
</button>
);
}动态路由参数
传递参数并跳转：
navigate('/user/123'); // 路径参数
navigate('/profile', { state: { id: 1 } }); // 状态参数获取路由参数
在目标组件中获取参数：
import { useParams, useLocation } from 'react-router-dom';
function UserPage() {
const { id } = useParams(); // 获取路径参数
const location = useLocation(); // 获取状态参数
const state = location.state;
}路由守卫
通过自定义组件实现权限控制：
function PrivateRoute({ children }) {
const isAuth = checkAuth();
return isAuth ? children : <Navigate to="/login" />;
}
// 使用方式
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />注意事项
- React Router v6 使用
Routes替代旧版的Switch - 路径匹配规则更严格，不再需要
exact属性 - 相对路径基于当前路由自动计算
- 嵌套路由需要通过
<Outlet>组件渲染子路由内容
以上方法覆盖了 React 中通过点击实现路由切换的主要场景，可根据实际需求选择合适的方式。
