今天在使用 react-router 用例时报错：

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

import type { Route } from './+types/about'

export default function About({ params, matches }: Route.ComponentProps) {
  return (
    <div>
      <h1>Welcome to My Route with Props!</h1>
      <p>Route Parameters: {JSON.stringify(params)}</p>
      <p>Matched Routes: {JSON.stringify(matches)}</p>
    </div>
  )
}

这个是服务端渲染才会出的错，一查配置果然是开启了 ssr

react-router.config.ts 的 ssr 改为 false

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;