这篇文章就当是我的学习笔记。想到哪写到哪，你要是也在学路由，说不定能少走点弯路。话说回来，

1️⃣ 第一个陷阱：误用原生

很多人刚开始接触 React Router 时会直接把普通的 标签用于导航。 却忘记它会发请求刷新页面。 这让我在开发支付页时一键访问 /pay 就被强行刷新的痛苦体验。

import { Link } from 'react-router-dom';function Navigation {
return (

);}

2️⃣ 第二个陷阱：Hash 与 History 模式混淆导致刷新报错

Hash模式不需要后端配合，但 URL 看起来丑陋；History模式外观好看，却要求服务器将所有请求重定向到 /index.html。不过， 部署到生产环境后我发现刷新子页面会报404。因为服务器没有对应方法文件。

try_files $uri $uri/ /index.html;说起来，

说到坑点。如果你不想为服务器设置额外规则，就选 Hash；如果想要干净 URL，就配合后端使用 BrowserRouter。 其实，

3️⃣ 第三个陷阱：忘记放置 导致嵌套路由不渲染

父级路由组件里没有 时即使子路由匹配成功。也不会渲染任何内容——页面空白而无任何错误提示。

// Products/index.jsx
import { Outlet } from 'react-router-dom';怎么说呢，function Products {
return (
<>

);}

再看解决办法，每次使用嵌套路由前先检查父组件是否包含 Outlet。不过，

4️⃣ 第四个陷阱：LocalStorage 字符串误判导致鉴权失效

I/O 操作总是返回字符串。如果你直接把结果做布尔判断：

const isLogin = localStorage.getItem;if {
// ...
}

错误！任何非空字符串都被视为真值。所以即使存的是 'false''，也会通过鉴权。

const isLogin = localStorage.getItem === 'true';if {
// 跳转登录页
}

经验教训的观点是，永远不要把布尔值直接存入 LocalStorage；始终显式转换类型，

5️⃣ 第五个陷阱：v6 中误用旧属性造成运行时错误

`v5` 的 `component`、`render` 等属性在 `v6` 已被废弃。只剩下 `element` 而且需要传 JSX 而非组件引用：

} />
// 错误写法

This bug often manifests as “Invalid hook call” or silent failures.

6️⃣ 第六个陷阱：懒加载组件未包裹 Suspense 导致报错 “React.lazy cannot be used without Suspense”

`lazy` 必须与 `` 配套使用，否则会抛出异常并阻止整个应用渲染：

const Home = lazy => import);老实说，

function App { return ( {/* 必须放在 Suspense 内部 */} Loading..."> } /> );}

说到小贴士。只有真正需要按需拆分的大模块才考虑懒加载，小型组件保持同步即可减少网络请求频繁带来的性能损耗。