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> <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

// 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> ); }