03-状态管理与路由——05-React Router 基础配置

React Router 基础配置一、React Router 简介React Router 是 React 应用的标准路由库。安装npminstallreact-router-dom二、基础配置2.1 创建路由// App.js import { BrowserRouter, Routes, Route, Link } from react-router-dom; import Home from ./pages/Home; import About from ./pages/About; import Contact from ./pages/Contact; function App() { return ( BrowserRouter nav Link to/首页/Link Link to/about关于/Link Link to/contact联系/Link /nav Routes Route path/ element{Home /} / Route path/about element{About /} / Route path/contact element{Contact /} / /Routes /BrowserRouter ); }2.2 使用 NavLink带激活样式import { NavLink } from react-router-dom; function Navigation() { return ( nav NavLink to/ className{({ isActive }) isActive ? active : } 首页 /NavLink NavLink to/about style{({ isActive }) ({ color: isActive ? red : black, fontWeight: isActive ? bold : normal })} 关于 /NavLink NavLink to/contact联系/NavLink /nav ); }三、编程式导航import { useNavigate } from react-router-dom; function LoginButton() { const navigate useNavigate(); const handleLogin () { // 登录逻辑 navigate(/dashboard); }; const goBack () { navigate(-1); // 返回上一页 }; const goForward () { navigate(1); // 前进一页 }; const replacePage () { navigate(/login, { replace: true }); // 替换历史记录 }; return ( div button onClick{handleLogin}登录/button button onClick{goBack}返回/button button onClick{goForward}前进/button /div ); }四、404 页面function App() { return ( BrowserRouter Routes Route path/ element{Home /} / Route path/about element{About /} / Route path/contact element{Contact /} / Route path* element{NotFound /} / /Routes /BrowserRouter ); } function NotFound() { const navigate useNavigate(); return ( div h1404 - 页面未找到/h1 button onClick{() navigate(/)}返回首页/button /div ); }五、重定向import { Navigate } from react-router-dom; function App() { const isLoggedIn false; return ( BrowserRouter Routes Route path/ element{Home /} / Route path/dashboard element{isLoggedIn ? Dashboard / : Navigate to/login /} / Route path/login element{Login /} / /Routes /BrowserRouter ); }六、HashRouter vs BrowserRouter类型URL 示例适用场景BrowserRouterexample.com/about需要服务器配置HashRouterexample.com/#/about静态托管、GitHub Pages// HashRouter 使用 import { HashRouter } from react-router-dom; function App() { return ( HashRouter {/* 路由配置 */} /HashRouter ); } // URL 会变成 example.com/#/about七、获取当前位置信息import { useLocation } from react-router-dom; function Breadcrumb() { const location useLocation(); return ( div 当前位置: {location.pathname} 搜索参数: {location.search} 哈希: {location.hash} 状态: {JSON.stringify(location.state)} /div ); }