BrowserRouter BrowserRouter 路由容器
最后更新：2026-10-28
BrowserRouter BrowserRouter 路由容器
BrowserRouter 是 react-router-dom 的路由容器：监听地址变化，把当前 location 通过 Context 提供给整棵组件树。它必须包在应用最外层，Routes、Route、Link 等 API 才能工作。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 组件 |
| 引入版本 | React Router 6.4 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { BrowserRouter, Routes, Route } from 'react-router-dom'
createRoot(document.getElementById('root')).render(
<BrowserRouter> {/* 监听 History API，提供 location 上下文 */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
)⚙️ 参数
| children | 应用内容；容器内的所有组件都能拿到路由上下文。 |
|---|---|
| basename | 可选。部署在子路径时统一加前缀，如 basename='/app'。 |
返回值：无（组件）。渲染 children，并把当前 location 与导航方法广播给整棵子树。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点导航按钮切换「页面」，当前路径加【】高亮——这正是 BrowserRouter 内部做的事：路径变 → 上下文更新 → 对应 Route 渲染（模拟演示）。💡 要点
ℹ️ 说明 BrowserRouter 用真实 URL（/about），刷新需服务端把所有路径回退到 index.html；HashRouter 用 #/about 无此要求。
💡 提示 v6.4+ 新项目可直接用 createBrowserRouter + RouterProvider：写法更函数式，还支持 loader 数据预取。
⚠️ 注意 BrowserRouter 只能有一个实例，且必须包住所有用到路由 API 的组件，放在组件树最外层。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q BrowserRouter 和 HashRouter 怎么选？
A 能配服务端回退就用 BrowserRouter（URL 干净、利于 SEO）；静态托管改不了服务器时用 HashRouter。
Q 刷新后 404 怎么办？
A BrowserRouter 的 /about 是前端路径，服务器上并不存在；需把所有路径 rewrite 到 index.html（Nginx try_files，Vercel/Netlify 默认支持）。
Q createBrowserRouter 是什么？
A v6.4 推出的数据路由写法：先配置路由对象（含 loader/action），再用 RouterProvider 渲染，是 BrowserRouter + Routes 的功能超集。
