# npm
npm install wouter
 
# pnpm
pnpm add wouter
 
# yarn
yarn add wouter

import { Route, Link, Switch } from 'wouter'
 
function App() {
  return (
    <div>
      <nav>
        <Link href="/">首页</Link>
        <Link href="/about">关于</Link>
      </nav>
 
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/user/:name" component={User} />
        <Route component={NotFound} />
      </Switch>
    </div>
  )
}

import { render } from 'react-dom'
import { Link, Route, Switch } from 'wouter'
 
function Home() {
  return <h1>首页</h1>
}
 
function About() {
  return <h1>关于</h1>
}
 
function User({ params }: { params: { name: string } }) {
  return <h1>你好，{params.name}！</h1>
}
 
function App() {
  return (
    <div>
      <nav>
        <Link href="/"><a>首页</a></Link>
        <Link href="/about"><a>关于</a></Link>
        <Link href="/john"><a>John</a></Link>
      </nav>
 
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/:name" component={User} />
      </Switch>
    </div>
  )
}
 
render(<App />, document.getElementById('root'))

import { useRoute, useLocation } from 'wouter'
 
function App() {
  const [location, setLocation] = useLocation()
  const [match, params] = useRoute('/user/:id')
 
  return (
    <div>
      <p>当前路径：{location}</p>
      {match ? (
        <p>用户 ID：{params?.id}</p>
      ) : (
        <p>未匹配</p>
      )}
      <button onClick={() => setLocation('/user/42')}>
        导航到用户 42
      </button>
    </div>
  )
}

import { Router } from 'wouter'
import { hashLocation, memoryLocation } from 'wouter/memory'
 
// 哈希路由
<Router hook={hashLocation}>
  <App />
</Router>
 
// 内存路由（测试用）
const [hook] = memoryLocation({ initial: '/home' })
<Router hook={hook}>
  <App />
</Router>

# 在现有 React 项目中添加
npm install wouter
 
# 无需额外配置，直接使用
npm run dev

import { Route } from 'wouter'
import type { Matcher } from 'wouter'
 
// 自定义匹配器：忽略大小写
const caseInsensitive = (pattern: string): Matcher => {
  return (path: string) => {
    if (path.toLowerCase() === pattern.toLowerCase()) {
      return {}
    }
    return null
  }
}
 
// 使用
<Route matcher={caseInsensitive} path="/About" component={About} />

// Wouter 不内置鉴权，需要自行实现
function ProtectedRoute({ path, children }: { path: string; children: React.ReactNode }) {
  const [match] = useRoute(path)
  const isAuthenticated = useAuth()
 
  if (!match) return null
  if (!isAuthenticated) return <Redirect to="/login" />
  return <>{children}</>
}
 
// 使用
<ProtectedRoute path="/dashboard">
  <Dashboard />
</ProtectedRoute>

import { render, screen } from '@testing-library/react'
import { Router } from 'wouter'
import { memoryLocation } from 'wouter/memory'
 
test('renders home page', () => {
  const [hook] = memoryLocation({ initial: '/' })
  render(
    <Router hook={hook}>
      <Route path="/" component={Home} />
    </Router>
  )
  expect(screen.getByText('首页')).toBeInTheDocument()
})

// ✅ 推荐：将路由配置集中在一个文件
// routes.tsx
import { Route, Switch } from 'wouter'
import Home from './pages/Home'
import About from './pages/About'
import UserDetail from './pages/UserDetail'
import NotFound from './pages/NotFound'
 
export function AppRoutes() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/user/:id" component={UserDetail} />
      <Route component={NotFound} />
    </Switch>
  )
}

// ✅ 推荐：手动实现路由级代码分割
import { lazy, Suspense } from 'react'
import { Route, Switch } from 'wouter'
 
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))
const Dashboard = lazy(() => import('./pages/Dashboard'))
 
function AppRoutes() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Suspense>
  )
}

// ✅ 推荐：封装导航逻辑
import { useLocation } from 'wouter'
 
function useNavigation() {
  const [, setLocation] = useLocation()
 
  return {
    navigate: (to: string) => setLocation(to),
    goBack: () => window.history.back(),
    goForward: () => window.history.forward(),
  }
}
 
// 使用
function MyComponent() {
  const { navigate } = useNavigation()
  return <button onClick={() => navigate('/about')}>关于</button>
}