React Router 7 中的关键新功能：拥抱 Remix 的未来

# Web 开发# React

React Router 7 代表了 React 路由生态系统的重大发展。它整合了 Remix 的强大功能并引入了必要的改进。本文探讨了核心变化并展示了它们的实际应用。

使用延迟组件增强数据加载

React Router 7 带来了一种更先进、更高效的延迟组件数据加载方法，允许应用程序逐步传输数据：

import { defer, useLoaderData, Await } from 'react-router';
import { Suspense } from 'react';

interface ProductData {
  id: string;
  name: string;
  details: {
    description: string;
    price: number;
  };
}

async function loader({ params }: { params: { id: string } }) {
  return defer({
    product: fetchProduct(params.id),
    recommendations: fetchRecommendations(params.id)
  });
}

function ProductPage() {
  const { product, recommendations } = useLoaderData();

  return (
    

      }>
        
          {(resolvedProduct: ProductData) => (
            
          )}
        
      

      }>
        
          {(resolvedRecommendations) => (
            
          )}
        
      
    

  );
}

服务器端渲染优化

该框架现在包括内置的服务器端渲染优化，对于大型应用程序特别有益：

import { createStaticHandler, createStaticRouter } from '@react-router/core';
import type { ServerResponse } from 'http';

interface AppContext {
  req: Request;
  res: ServerResponse;
}

async function handleRequest(context: AppContext) {
  const handler = createStaticHandler(routes);
  const response = await handler.query(
    new Request(context.req.url, {
      method: context.req.method,
      headers: context.req.headers,
    })
  );

  return response;
}

const router = createStaticRouter(routes, {
  basename: '/app',
  hydrationData: {
    loaderData: initialData,
  },
});

使用 TypeScript 增强类型安全性

React Router 7 强调改进 TypeScript 集成：

import { type LoaderFunctionArgs, json } from '@remix-run/router';

interface UserData {
  id: string;
  name: string;
  email: string;
}

interface LoaderError {
  message: string;
  code: number;
}

async function loader({ 
  params,
  request 
}: LoaderFunctionArgs): Promise {
  try {
    const userData: UserData = await fetchUser(params.userId);
    return json(userData);
  } catch (error) {
    const errorData: LoaderError = {
      message: 'Failed to fetch user',
      code: 404
    };
    return json(errorData, { status: 404 });
  }
}

客户端数据变更

该框架引入了一种更简化的方法来处理客户端突变，它就像一个加载器，但这次您将能够提交表单或执行任何操作：

import { useFetcher } from 'react-router';

interface CommentData {
  id: string;
  content: string;
  userId: string;
}

function CommentForm() {
  const fetcher = useFetcher();

  const isSubmitting = fetcher.state === 'submitting';

  return (