React-Router6 最快最直接的上手指南

React-Router6 快速上手指南：掌握动态路由、嵌套路由和更多功能

React-Router6 的种类

React-Router6 是一个路由库，可帮助您轻松构建单页应用程序。它有两种主要类型：

• react-router： 核心库，提供基本路由功能。
• react-router-dom： 专门用于开发 web 网页端的包，提供了额外的功能，例如链接和导航。

安装和配置

要安装 React-Router6，请使用以下命令：

npm install react-router react-router-dom

然后，在您的项目中配置它，通常在 src/index.js 中：

import { BrowserRouter } from "react-router-dom";
import { Routes, Route } from "react-router";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 定义您的路由... */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

创建基本路由

使用 Route 组件定义路由，并指定路径和组件：

<Route path="/" element={<Home />} />

使用 Link 组件创建导航链接：

<Link to="/">Home</Link>

嵌套路由

使用嵌套 Route 组件创建嵌套路由。子路由的路径相对于父路由的路径：

<Route path="/products" element={<Products />}>
  <Route path="/products/:productId" element={<ProductDetail />} />
</Route>

动态路由

使用动态路径参数创建动态路由。使用 useParams() 钩子访问动态路径参数：

const ProductDetail = () => {
  const { productId } = useParams();
  // ...
};

重定向

使用 Redirect 组件创建重定向。重定向可以是临时性的或永久性的：

<Route path="/old-path" element={<Redirect to="/new-path" />} />

导航钩子

使用导航钩子拦截和修改导航。常用的导航钩子包括 onEnter、onLeave 和 onChange：

const PrivateRoute = ({ children }) => {
  const isAuthenticated = useAuth();

  return (
    <Route
      {...props}
      onEnter={(nextState, replaceState) => {
        if (!isAuthenticated) {
          replaceState('/login');
        }
      }}
    >
      {children}
    </Route>
  );
};

提示和技巧

• 使用 React Router Devtools 调试路由。
• 使用 useNavigate() 钩子进行编程导航。
• 使用 useLocation() 钩子访问当前位置信息。

结论

React-Router6 是一个功能丰富的路由库，可以帮助您轻松构建单页应用程序。本指南介绍了 React-Router6 的基础知识和各种特性，并提供了一些提示和技巧，帮助您充分利用它的功能。

常见问题解答

1. 如何在 React-Router6 中使用查询参数？

使用 useSearchParams() 钩子访问查询参数：

const SearchPage = () => {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  // ...
};

2. 如何在 React-Router6 中传递状态？

使用 useLocation() 钩子访问位置状态：

const ProductDetail = () => {
  const location = useLocation();
  const state = location.state;
  // ...
};

3. 如何在 React-Router6 中实现受保护的路由？

使用导航钩子检查授权，并重定向未授权用户：

const PrivateRoute = ({ children }) => {
  // ... (参见上面的示例)
};

4. 如何在 React-Router6 中使用 lazy loading？

使用 React.lazy() 和 Suspense 组件实现 lazy loading：

const Products = React.lazy(() => import('./Products'));

5. 如何在 React-Router6 中处理错误？

使用 <ErrorBoundary> 组件处理路由错误：

const ErrorBoundary = ({ error }) => {
  // 处理错误...
};