建议收藏 | React Hooks的6种路由配置

▌ 技术引导 这篇文章讲的是React Hooks的6种路由配置，这6种方式我亲测过，踩过坑也用过，每种都对应不同的场景和实际需求。你可能觉得路由配置是小事，但选错了方式，代码会变得一团乱，性能也会直线下滑。React Router v6是关键，它让Hooks和路由完美融合，但不同的配置方式能带来完全不一样的体验。比如用useNavigate跳转，用useParams获取参数，用useLocation解析路径，这些是基本操作。还有像嵌套路由、动态路由、路由守卫等，每个都需要掌握对应的技巧。你要是想优化性能，避开不必要的重渲染，或者想在服务端渲染中处理路由，得看清楚每种方式的适用范围。我见过太多人因为配置不当导致页面闪白，或者状态同步失败，所以这篇不讲理论，只讲落地经验。 ▌ 技术参考 一 React Router v6的useNavigate和useParams组合是当前最常用的方式，特别是在函数组件中。useNavigate提供编程式导航，用法是声明式调用，比如navigate('/profile')，还可以带参数navigate('/user', { state: { id: 123 } })。而useParams用于提取URL中的参数，只需要在组件中使用const { id } = useParams()就可以拿到。这种组合在动态路由中特别稳定，但需要注意路径匹配的顺序，如果路径有重叠，参数提取可能出错。我曾在做用户详情页时因为路径写反，导致params取不到正确的值，最后排查了整整一小时，才发现是路径冲突。 二 嵌套路由在React Router中是通过路由的children属性实现的，要确保父路由组件中使用来渲染子路由。比如}> } /> } /> ，这样就能实现嵌套布局。但有些同学会把Outlet写在子组件里，导致布局不一致。我之前在项目中遇到这个问题，页面虽然能显示，但导航栏会重复，最后发现是Outlet未正确嵌套。配置好嵌套路由后，记得用useParams来获取子路径参数，比如在settings组件中，你可能需要参数来自父级的路径部分。 三 动态路由的实现方式有多种，最常见的是通过参数拼接路径。比如： } />，然后在组件里用const { id } = useParams()获取。这种方式简单但不灵活，不能处理复杂路径。另一种方式是用useLocation获取整个路径，再手动解析。比如const location = useLocation()，然后用new URLSearchParams(location.search)来提取查询参数。这种方法更强大，但需要自己处理路径逻辑，容易出错。我之前做过一个搜索页面，用参数拼接路径导致URL太长，后来换成查询参数，体验明显更流畅。 四 在React Router中使用路由守卫需要结合react-router-dom的useNavigate和useLocation，或者通过自定义Hook实现。比如在跳转前检查用户权限，可以用useNavigate()来拦截导航，或者用useEffect监听location变化。不过需要注意，useNavigate返回的函数是惰性的，不能在函数组件里直接调用，要放在useEffect里触发。我之前写过一个权限验证的路由守卫，用useLocation监听路径变化，然后用useNavigate导航到登录页，但因为路径变化后未触发useEffect，守卫失效。后来改用useNavigate() + useSearchParams，才把问题解决。 五 高级路由配置包括路由懒加载、路由缓存、路由动画等。懒加载可以用React.lazy和Suspense，比如： const User = React.lazy(() => import('./User')); }>} />。这样能减少初始加载时间，对性能有明显提升。而路由缓存可以用react-router-cache，但需要自己处理缓存逻辑，比如用useEffect和useMemo来记住组件状态。我之前用过这种方法，发现缓存状态后组件在导航回来后不会重新渲染，用户体验很流畅。 六 动态路由还可以通过useRouteMatch来匹配当前路径，这个钩子返回当前路由的match对象，可以用它来判断是否是当前路由。比如const match = useRouteMatch('/user/:id');，然后判断match?.params.id是否存在。这种方式在做侧边栏菜单时特别有用，可以动态渲染对应的子项。但要注意，useRouteMatch在v6中已经被弃用，现在推荐用useParams和useLocation来代替。我之前在迁移到v6时误用了useRouteMatch，导致路径匹配错误，后来改用useParams + useLocation解决了问题。 七 在服务端渲染（SSR）中配置React Router需要额外处理，比如使用react-router-dom的createBrowserRouter方法，而不是默认的createHashHistory。SSR时，路径需要和服务器端的路由配置对齐，否则会出现404错误。我之前用Next.js做SSR，但因为没正确配置路由，导致某些页面无法渲染，后来调整了路由加载方式，加上服务端预渲染，问题才解决。使用createBrowserRouter后，能更好地支持SSR和预渲染，但需要额外处理数据预加载。 八 使用react-router-dom的useNavigate钩子时，需要注意它返回的函数是惰性的，不能在函数组件中直接调用。比如，如果你在函数组件中调用navigate()，可能会因为React的调度机制导致跳转失败。正确的做法是将navigate()放在useEffect中，或者用useNavigate()返回的函数作为回调。我之前在某个项目中因为这个错误，导致点击按钮无响应，后来在useEffect里调用，问题才解决。同时，navigate函数支持带状态，使得页面跳转后能携带数据，比如navigate('/profile', { state: { from: 'dashboard' } })。 九 在路由配置中，使用exact属性可以避免路径匹配错误。比如} />，能确保只有完全匹配路径时才渲染组件。不过在v6中exact属性已经被移除，现在需要手动处理路径匹配，比如使用path="/home"，然后在组件中用window.location.pathname来进行判断。我之前在迁移到v6时，因为没加exact导致页面出现重叠，后来改用字符串匹配，问题才解决。另外，使用动态路径时，要注意路径的层级和顺序，否则会导致参数提取错误。 十 使用BrowserRouter时，路由配置应该统一使用createBrowserRouter，而不是旧版的createHashHistory。createBrowserRouter支持历史模式，适合部署在Web服务器上。而createHashHistory使用的是哈希模式，适合某些特殊环境，比如单页应用嵌入其他页面时。在实际项目中，我见过太多人因为没使用createBrowserRouter导致404错误，特别是在部署后。所以配置路由时，务必确认使用的是createBrowserRouter，否则即使本地跑得好，上线也会出问题。 十一 在路由状态管理中，使用useParams和useLocation是关键。params用来获取路径参数，location用来获取搜索参数和hash。比如，获取查询参数可以用： const searchParams = new URLSearchParams(location.search); const id = searchParams.get('id') || 'default';。这种方式在处理过滤和搜索时特别实用。我之前做过一个滤波器页面，参数需要动态加载，但因为没用到location.search，导致数据获取失败，后来改成用这种方式才解决。另外，使用useNavigate()可以带参数跳转，提升开发效率。 十二 React Router v6的路由配置可以通过路由对象的children属性实现嵌套，但需要注意children路由必须写在父路由之下，否则无法渲染。比如： }> } /> 。这种结构在做多级菜单时非常方便，但容易出错。我曾在一个项目中，因为没有正确嵌套children路由，导致子路由无法访问，浪费了不少调试时间。所以配置嵌套路由时，一定要检查children的层级和顺序是否正确。 十三 在使用路由的动态加载功能时，需要注意useNavigate的调用时机。比如，当使用useNavigate()来导航时，应该放在useEffect中，或者在点击事件中使用。否则可能会因为组件未完全渲染导致跳转失败。我之前写过一个自定义按钮组件，直接调用navigate导致按钮无法触发跳转，后来把它放在useEffect里，才解决这个问题。同时，useNavigate()支持带状态，方便在跳转后恢复页面状态。 十四 动态路由的参数提取方式有多种，除了useParams，还可以用location.pathname来手动解析。比如： const path = location.pathname; const parts = path.split('/'); const id = parts[2] || 'default'；。这种方式在需要更精细控制路径时非常有用，但容易出错，特别是在路径层级不固定的情况下。我之前做过一个文件管理页面，路径格式是动态的，用这种方式解析参数反而更可控。不过要确保路径结构一致，否则会引发混乱。 十五 使用react-router-dom的useOutlet钩子可以实现React Router v6中的嵌套路由。比如，在父组件中使用来渲染子组件，子组件中可以使用useOutletContext来获取父组件传递的数据。这种方式特别适合做布局组件，比如侧边栏、导航栏等。我曾经在做一个权限管理组件时，用useOutletContext传递权限数据，让子路由能根据权限动态加载内容。但需要注意，outlet上下文只能在子路由组件中使用，否则会报错。 十六 在处理路由权限时，可以利用useNavigate和useLocation的组合，比如在useEffect中监听location变化，然后执行权限检查。如果权限不足，直接调用navigate跳转到登录页。这种方式能保证用户在访问受限页面时，自动跳转。我之前在开发一个后台系统时，用这种方式实现了路由权限控制，但要注意，不能在useEffect里直接调用navigate，否则可能导致无限循环。所以最好是在useEffect里设置回调函数，或者用useNavigate()返回的函数来控制跳转逻辑。 十七 配置React Router的路由时，要确保每个路由都有唯一的key，这样React才能正确区分不同路径。没有key的话，组件可能不会重新渲染，导致状态不更新。比如，} />，这个key必须是唯一的。我之前因为没加key，导致路由切换时组件没更新，页面状态一直保留，用户体验非常差。所以，必须为每个路由设置唯一的key，尤其是在动态加载路由时。 十八 在使用React Router v6的useNavigate钩子时，注意它返回的函数是惰性的，不能在函数组件中直接调用，否则会报错。正确的做法是将导航逻辑放在useEffect里，或者使用useNavigate()返回的函数作为回调。比如，在点击按钮时，可以这样写： useEffect(() => { const navigate = useNavigate(); if (condition) { navigate('/login'); } }, [condition]);。这样能避免因为组件未渲染完全导致的跳转失败。我之前在开发一个权限验证组件时，因为直接调用navigate，导致跳转失败，后来改用惰性调用，问题才解决。 十九 使用React Router的路由守卫功能时，可以结合useNavigate和useLocation来实现。比如在useEffect里监听location变化，然后执行验证逻辑。如果权限不足，直接调用navigate跳转到登录页。这种方式能保证用户在访问受限页面时，自动跳转。我之前在开发一个后台系统时，用这种方式实现了路由权限控制，但要注意，不能在useEffect里直接调用navigate，否则可能导致无限循环。所以最好是在useEffect里设置回调函数，或者用useNavigate()返回的函数来控制跳转逻辑。 二十 在路由配置中，如果遇到路径冲突，可以使用path的优先级来解决。比如，把更具体的路径放在前面，这样React Router会优先匹配。我之前有一个项目，路径是/user/123和/user，结果因为路径顺序错误，导致所有用户路径都被匹配为/user，后来调整了顺序，问题才解决。优先级对路由匹配至关重要，尤其是在复杂路径结构中。 二十一 如果需要在路由中传递数据，可以使用useNavigate()带来的state参数，比如navigate('/profile', { state: { user: data } })。这种方式能避免使用URL参数，减少路径复杂度。但要注意，state数据不能太大，否则会影响性能。我之前在做数据展示页时，用这种方式传递数据，但因为数据太大，导致页面加载变慢。后来改用查询参数，问题才解决。 二十二 在使用React Router时，需要注意路径的分隔符是否正确，比如是否使用斜杠。有些同学会因为路径拼接错误，导致路由失效。比如，把path写成/user/123而不是/user/123，就会出现匹配失败。我之前在开发一个用户详情页面时，路径写错了，导致页面无法访问，最后检查发现是路径分隔符的问题。所以，配置路径时一定要确保格式正确。 二十三 使用React Router的动态路由时，要注意路径中的参数是否会被正确解析。比如，path="/user/:id"，在URL中输入/user/123，参数id就能正确获取。但如果路径是/user/:id/profile，可能会出现参数提取错误，因为:user参数的位置不固定。我之前因为没正确处理路径结构，导致参数无法正确获取，后来用useParams和location.pathname手动处理，才解决这个问题。 二十四 在处理路由状态时，可以使用useLocation来获取当前路径和搜索参数，然后用useNavigate进行导航。比如，使用searchParams.get('search')来获取查询参数，再用navigate('/search?query=xxx')来跳转。这种方式能保证参数的传递和解析更加可控。我之前在做搜索功能时，用这种方式实现了参数的传递和跳转，但要注意，参数不能包含特殊字符，否则需要编码处理。 二十五 在配置React Router v6的路由时，要确保所有路径都使用createBrowserRouter，而不是createHashHistory。createBrowserRouter支持历史模式，适合部署在Web服务器上，而createHashHistory则适用于某些特殊场景。我之前因为使用createHashHistory，导致部署后出现404错误，后来改用createBrowserRouter，问题才解决。所以，配置路由时要根据实际部署环境选择合适的History类型。