React: React Router 入门

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function Home() {
  return <h2>仪表盘主页</h2>
}

function ProductList() {
  return <h2>商品列表</h2>
}

function Settings() {
  return <h2>系统设置</h2>
}

function NotFound() {
  return <h2>404 — 页面未找到</h2>
}

function App() {
  return (
    <BrowserRouter>
      <nav style={{ display: 'flex', gap: '1rem', padding: '1rem', background: '#f0f0f0' }}>
        <Link to="/">首页</Link>
        <Link to="/products">商品管理</Link>
        <Link to="/settings">系统设置</Link>
      </nav>

      <main style={{ padding: '1rem' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<ProductList />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </BrowserRouter>
  )
}

export default App

import { NavLink } from 'react-router-dom'

function NavBar() {
  const linkStyle = {
    padding: '8px 16px',
    textDecoration: 'none',
    borderRadius: '6px',
    transition: 'all 0.2s'
  }

  const activeStyle = {
    ...linkStyle,
    backgroundColor: '#1976d2',
    color: '#fff',
    fontWeight: 'bold'
  }

  const inactiveStyle = {
    ...linkStyle,
    color: '#333'
  }

  return (
    <nav style={{ display: 'flex', gap: '12px', padding: '12px', background: '#fafafa' }}>
      <NavLink
        to="/"
        style={({ isActive }) => (isActive ? activeStyle : inactiveStyle)}
        end  // 精确匹配，避免 "/" 匹配所有以 "/" 开头的路径
      >
        首页
      </NavLink>
      <NavLink
        to="/products"
        style={({ isActive }) => (isActive ? activeStyle : inactiveStyle)}
      >
        商品管理
      </NavLink>
      <NavLink
        to="/settings"
        style={({ isActive }) => (isActive ? activeStyle : inactiveStyle)}
      >
        系统设置
      </NavLink>
    </nav>
  )
}

import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom'

// 父布局组件 — 共享的侧边栏 + Outlet
function ProductsLayout() {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', padding: '16px', background: '#f5f5f5' }}>
        <h3>商品管理</h3>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          <Link to="list">商品列表</Link>
          <Link to="add">添加商品</Link>
        </nav>
      </aside>
      <main style={{ flex: 1, padding: '16px' }}>
        {/* 子路由的组件在这里渲染 */}
        <Outlet />
      </main>
    </div>
  )
}

function ProductList() {
  const products = [
    { id: 1, name: 'React 编程书', price: 79 },
    { id: 2, name: 'TypeScript 指南', price: 59 },
    { id: 3, name: 'Node.js 实战', price: 69 }
  ]

  return (
    <div>
      <h2>商品列表</h2>
      <ul>
        {products.map(p => (
          <li key={p.id}>
            <Link to={`/products/detail/${p.id}`}>
              {p.name} — ${p.price}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

function AddProduct() {
  return (
    <div>
      <h2>添加商品</h2>
      <form onSubmit={e => { e.preventDefault(); alert('提交成功！') }}>
        <div><label>商品名：<input name="name" /></label></div>
        <div><label>价格：<input name="price" type="number" /></label></div>
        <button type="submit">提交</button>
      </form>
    </div>
  )
}

function ProductDetail() {
  const { id } = useParams()
  return <h2>商品详情（ID：{id}）</h2>
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h2>首页</h2>} />
        {/* 嵌套路由：父路由带布局，子路由通过 Outlet 渲染 */}
        <Route path="/products" element={<ProductsLayout />}>
          <Route index element={<ProductList />} />          {/* /products 默认显示 */}
          <Route path="list" element={<ProductList />} />     {/* /products/list */}
          <Route path="add" element={<AddProduct />} />       {/* /products/add */}
          <Route path="detail/:id" element={<ProductDetail />} /> {/* /products/detail/1 */}
        </Route>
        <Route path="*" element={<h2>404 未找到</h2>} />
      </Routes>
    </BrowserRouter>
  )
}

function UserDetail() {
  const { userId, postId } = useParams()
  return <p>用户 {userId} 的文章 {postId}</p>
}
// URL: /users/42/posts/99 → userId=42, postId=99

import { useParams, Link, useNavigate } from 'react-router-dom'

// 模拟商品数据
const products = [
  { id: '1', name: 'React 编程书', price: 79, description: '从零到一掌握 React 18 开发' },
  { id: '2', name: 'TypeScript 指南', price: 59, description: '系统学习 TypeScript 类型系统' },
  { id: '3', name: 'Node.js 实战', price: 69, description: '后端开发从入门到进阶' }
]

function ProductDetail() {
  const { id } = useParams()
  const navigate = useNavigate()
  const product = products.find(p => p.id === id)

  if (!product) {
    return (
      <div>
        <h2>商品不存在</h2>
        <button onClick={() => navigate('/products')}>返回商品列表</button>
      </div>
    )
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p className="price">价格：${product.price}</p>
      <p className="desc">{product.description}</p>
      <Link to="/products">← 返回列表</Link>
    </div>
  )
}

// 路由定义
<Route path="/categories/:catId/products/:prodId" element={<ProductView />} />

// 组件中提取
function ProductView() {
  const { catId, prodId } = useParams()
  // URL: /categories/electronics/products/42
  // catId = "electronics", prodId = "42"
  return <h2>分类 {catId} 下的商品 {prodId}</h2>
}

// 方式一：定义两个 Route（推荐）
<Route path="/categories/:catId" element={<CategoryPage />} />
<Route path="/categories/:catId/:tab" element={<CategoryPage />} />

// 方式二：在组件内自行判断
function CategoryPage() {
  const { catId, tab } = useParams()
  const activeTab = tab || 'overview'  // 默认值
  return <h2>分类 {catId} - {activeTab}</h2>
}

// 假设有以下路由配置
<Routes>
  <Route path="/products/new" element={<NewProduct />} />     {/* 静态路径 */}
  <Route path="/products/:id" element={<ProductDetail />} />  {/* 动态路径 */}
  <Route path="/products/:id/edit" element={<EditProduct />} /> {/* 混合路径 */}
</Routes>

// 当前在 /products 下（ProductsLayout 组件内）

<Link to="list">        {/* → /products/list（相对路径，拼接到当前路由后） */}
<Link to="/list">       {/* → /list（绝对路径，直接替换） */}
<Link to="../settings"> {/* → /settings（父级相对路径） */}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/products" element={<ProductList />} />
      <Route path="/products/:id" element={<ProductDetail />} />
      <Route path="/about" element={<About />} />

      {/* 通配符路由必须放在最后 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

function NotFound() {
  return (
    <div style={{ textAlign: 'center', padding: '40px' }}>
      <h1>404</h1>
      <p>抱歉，您访问的页面不存在。</p>
      <Link to="/">返回首页</Link>
    </div>
  )
}

import { useNavigate } from 'react-router-dom'

function OrderSuccess() {
  const navigate = useNavigate()
  const [countdown, setCountdown] = useState(5)

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer)
          navigate('/orders')  // 倒计时结束自动跳转
          return 0
        }
        return prev - 1
      })
    }, 1000)

    return () => clearInterval(timer)
  }, [navigate])

  return (
    <div>
      <h2>下单成功！</h2>
      <p>{countdown} 秒后自动跳转到订单页</p>
      <button onClick={() => navigate('/orders')}>立即查看</button>
    </div>
  )
}

import { BrowserRouter, Routes, Route, NavLink, Outlet, useParams } from 'react-router-dom'
import './App.css'

// 布局组件
function AdminLayout() {
  return (
    <div className="admin-container">
      <header className="admin-header">
        <h1>Tom 电商管理后台</h1>
      </header>
      <div className="admin-body">
        <nav className="admin-sidebar">
          <NavLink to="/" end>仪表盘</NavLink>
          <NavLink to="/products">商品管理</NavLink>
          <NavLink to="/orders">订单管理</NavLink>
          <NavLink to="/settings">系统设置</NavLink>
        </nav>
        <main className="admin-content">
          <Outlet />
        </main>
      </div>
    </div>
  )
}

// 页面组件
function Dashboard() {
  return <h2>欢迎回来，Tom！今日订单数：42</h2>
}

function ProductsLayout() {
  return (
    <div>
      <h2>商品管理</h2>
      <nav>
        <NavLink to="list">商品列表</NavLink>
        <NavLink to="add">添加商品</NavLink>
      </nav>
      <Outlet />
    </div>
  )
}

function ProductList() {
  return <p>这里显示商品列表...</p>
}

function AddProduct() {
  return <p>这里显示添加商品表单...</p>
}

function Orders() {
  return <h2>订单管理</h2>
}

function Settings() {
  return <h2>系统设置</h2>
}

function NotFound() {
  return <h2>404 — 页面不存在</h2>
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<AdminLayout />}>
          <Route index element={<Dashboard />} />
          <Route path="products" element={<ProductsLayout />}>
            <Route index element={<ProductList />} />
            <Route path="list" element={<ProductList />} />
            <Route path="add" element={<AddProduct />} />
          </Route>
          <Route path="orders" element={<Orders />} />
          <Route path="settings" element={<Settings />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}