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> <h1>404 - 页面未找到</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 示例 | 适用场景 |
|---|---|---|
| BrowserRouter | example.com/about | 需要服务器配置 |
| HashRouter | example.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> ); }
