App Router实战总结从零到精通那些坑与技巧

我的写法，亲测靠谱

大家好，今天我要分享一下我在使用App Router过程中的一些实战经验。这玩意儿在实际项目中用得挺多的，但有时候也会踩不少坑。我一般这样处理，希望对大家有帮助。

核心代码就这几行

首先，我们来看一下基本的App Router配置。这个配置我用过很多次了，感觉挺靠谱的。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

这里的关键在于createBrowserRouter和RouterProvider。这种写法的好处是简单明了，直接把路由配置好了，然后通过RouterProvider来渲染。

这几种错误写法，别再踩坑了

接下来，我给大家展示几种常见的错误写法。这些写法我以前也用过，结果发现容易出问题。

错误1：直接在App组件里定义路由

很多人刚开始用React Router时会这样做：

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

这种写法的问题是不够灵活。如果你需要动态加载路由或者做懒加载，这种写法就不行了。而且，每次修改路由配置都要改App组件，有点麻烦。

错误2：不使用createBrowserRouter

还有一种常见的错误是不用createBrowserRouter，直接在App组件里写一大堆路由配置：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/services" element={<Services />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/contact-us" element={<ContactUs />} />
        {/* 这里可以继续加更多路由 */}
      </Routes>
    </Router>
  );
}

这种写法虽然也能用，但管理起来很麻烦。一旦路由多了，维护起来非常痛苦。而且，这种方式也不利于代码的复用和扩展。

实际项目中的坑

在实际项目中，我遇到过几个比较坑的地方，这里跟大家分享一下。

坑1：路由参数传递

在实际项目中，经常需要传递一些参数给子路由。比如用户点击某个商品，要跳转到商品详情页，并传递商品ID。这种情况下，我会这样处理：

import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams();
  // 使用id去获取商品详情
  return <div>Product Detail: {id}</div>;
}

注意，这里一定要确保路径里有:id这样的参数，不然useParams会拿不到值。

坑2：嵌套路由

嵌套路由也是个坑。比如，你需要在一个页面里嵌套多个子路由。这时候，我一般会这样写：

const router = createBrowserRouter([
  {
    path: "/dashboard",
    element: <Dashboard />,
    children: [
      {
        path: "users",
        element: <Users />,
      },
      {
        path: "settings",
        element: <Settings />,
      },
    ],
  },
]);

这样写的好处是结构清晰，维护起来也方便。不过要注意，children里的路径都是相对于父路径的，不要搞错了。

坑3：动态加载路由

动态加载路由也是个难点。比如，你有一个后台管理系统，用户的权限不同，能看到的页面也不同。这种情况下，我通常会这样处理：

import { useRoutes } from 'react-router-dom';
import { useEffect, useState } from 'react';

function DynamicRoutes() {
  const [routes, setRoutes] = useState([]);

  useEffect(() => {
    // 假设从API获取用户权限
    fetch('https://jztheme.com/api/user-permissions')
      .then(response => response.json())
      .then(data => {
        const dynamicRoutes = data.permissions.map(permission => ({
          path: /${permission.route},
          element: <div>{permission.title}</div>,
        }));
        setRoutes(dynamicRoutes);
      });
  }, []);

  return useRoutes(routes);
}

这种写法的好处是灵活，可以根据用户权限动态生成路由。不过要注意，动态加载路由时可能会有延迟，用户体验可能不太好。这时候可以考虑加个loading状态。

结尾

以上是我总结的一些关于App Router的最佳实践和踩坑经验。希望对你有帮助。如果有更好的方案，欢迎评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享这类博客。

踩坑后的总结，希望能帮到你。祝你开发顺利！