React Router

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/users">用户</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

import { useParams } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/user/:id" element={<UserDetail />} />
      <Route path="/post/:postId/comment/:commentId" element={<Comment />} />
    </Routes>
  );
}

function UserDetail() {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />}>
          <Route path=":id" element={<UserDetail />} />
        </Route>
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <nav>导航栏</nav>
      <Outlet /> {/* 子路由渲染位置 */}
      <footer>页脚</footer>
    </div>
  );
}

import { Link } from 'react-router-dom';

<Link to="/about">关于</Link>
<Link to="/user/123">用户详情</Link>
<Link to="/search?q=react">搜索</Link>

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

<NavLink 
  to="/about"
  className={({ isActive }) => isActive ? 'active' : ''}
>
  关于
</NavLink>

<NavLink
  to="/users"
  style={({ isActive }) => ({
    color: isActive ? 'red' : 'black'
  })}
>
  用户
</NavLink>

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

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // 登录成功后跳转
    navigate('/dashboard');
    
    // 替换当前历史记录
    navigate('/home', { replace: true });
    
    // 返回上一页
    navigate(-1);
    
    // 前进
    navigate(1);
  };

  return <button onClick={handleSubmit}>登录</button>;
}

import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const query = searchParams.get('q');
  const page = searchParams.get('page') || 1;

  const handleSearch = (keyword) => {
    setSearchParams({ q: keyword, page: 1 });
  };

  return (
    <div>
      <p>搜索: {query}</p>
      <p>页码: {page}</p>
    </div>
  );
}

import { useLocation } from 'react-router-dom';

function CurrentPath() {
  const location = useLocation();
  
  return (
    <div>
      <p>路径: {location.pathname}</p>
      <p>查询: {location.search}</p>
      <p>哈希: {location.hash}</p>
      <p>状态: {JSON.stringify(location.state)}</p>
    </div>
  );
}

// 传递状态
<Link to="/detail" state={{ from: 'home' }}>详情</Link>

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

function BackButton() {
  const navigate = useNavigate();
  
  return (
    <button onClick={() => navigate(-1)}>返回</button>
  );
}

import { Navigate } from 'react-router-dom';

function PrivateRoute({ children }) {
  const isAuthenticated = useAuth();
  
  return isAuthenticated ? children : <Navigate to="/login" />;
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route 
        path="/dashboard" 
        element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        } 
      />
    </Routes>
  );
}

function RequireAuth({ children }) {
  const auth = useAuth();
  const location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

function NotFound() {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <Link to="/">返回首页</Link>
    </div>
  );
}

// 使用 HTML5 History API
// URL: /about
<BrowserRouter>
  <App />
</BrowserRouter>

// 使用 URL hash
// URL: /#/about
<HashRouter>
  <App />
</HashRouter>

// 内存路由，用于测试
<MemoryRouter initialEntries={['/home']}>
  <App />
</MemoryRouter>

import { BrowserRouter, Routes, Route, Link, Navigate } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Users = lazy(() => import('./pages/Users'));
const UserDetail = lazy(() => import('./pages/UserDetail'));

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/users">用户</Link>
      </nav>

      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
          <Route path="/users/:id" element={<UserDetail />} />
          <Route path="/old-path" element={<Navigate to="/new-path" replace />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

import { useLocation, Link } from 'react-router-dom';

function Breadcrumb() {
  const location = useLocation();
  const paths = location.pathname.split('/').filter(x => x);

  return (
    <nav>
      <Link to="/">首页</Link>
      {paths.map((path, index) => {
        const url = `/${paths.slice(0, index + 1).join('/')}`;
        return (
          <span key={url}>
            {' / '}
            <Link to={url}>{path}</Link>
          </span>
        );
      })}
    </nav>
  );
}