react路由实现页面跳转
路由基础配置
在React中实现页面跳转通常使用react-router-dom库。安装依赖包：
npm install react-router-dom在项目入口文件（如index.js）中配置路由容器：
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);路由定义与导航
在组件中定义路由路径与组件的映射关系：
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/home" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
);
}使用Link组件实现声明式导航：
import { Link } from 'react-router-dom';
function NavBar() {
return (
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}编程式导航
在事件处理函数中使用useNavigate钩子：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => {
// 跳转到指定路径
navigate('/dashboard');
// 带参数跳转
navigate('/profile?id=123');
// 替换当前历史记录
navigate('/settings', { replace: true });
};
return <button onClick={handleLogin}>Login</button>;
}动态路由与参数获取
定义带参数的路由路径：
<Route path="/user/:userId" element={<UserProfile />} />在目标组件中获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { userId } = useParams();
return <div>User ID: {userId}</div>;
}嵌套路由实现
通过嵌套Route组件实现布局复用：
<Route path="/admin" element={<AdminLayout />}>
<Route path="dashboard" element={<Dashboard />} />
<Route path="users" element={<UserList />} />
</Route>在布局组件中使用Outlet渲染子路由：
import { Outlet } from 'react-router-dom';
function AdminLayout() {
return (
<div>
<AdminHeader />
<Outlet /> {/* 子路由将在此渲染 */}
</div>
);
}路由守卫与权限控制
通过高阶组件实现路由守卫：
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth();
return isAuthenticated ? element : <Navigate to="/login" />;
}
// 使用方式
<Route path="/private" element={<PrivateRoute element={<PrivatePage />} />} />404页面处理
添加通配符路由作为兜底处理：
<Route path="*" element={<NotFoundPage />} />
