React 路由指南：用 vite 打造现代单页应用

React 路由指南：用 Vite 构建现代单页应用

简介

在单页应用 (SPA) 的开发中，React 路由扮演着至关重要的角色，它使您可以在不重新加载页面的情况下在不同页面之间平滑导航。React-router-dom 是与 React 完美契合的路由库，为您构建出色的 SPA 提供了强大的工具。

Vite：高速开发

Vite 是一个创新的构建工具，通过使用原生 ESM 模块和浏览器内编译，极大地提升了您的开发速度。这意味着您可以快速预览代码更改，并毫不费力地运用最先进的 JavaScript 特性。

安装 React Router DOM

要安装 React Router DOM，请在终端中键入以下命令：

npm install react-router-dom

配置 React Router DOM

在 App.js 文件中，按照以下代码进行配置：

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

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

export default App;

这将创建两个路由：一个指向主页（"/"), 另一个指向关于页（"/about"）。

创建主页和关于页

在 Home.js 文件中，创建主页：

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Home;

在 About.js 文件中，创建关于页：

function About() {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
}

export default About;

运行应用程序

在终端中，启动开发服务器：

npm run dev

在浏览器中，您将看到主页。点击 "About" 链接即可导航到关于页。

结论

React Router DOM 为您的 React SPA 提供了强大的路由功能，使您能够轻松创建动态且交互式的应用程序。借助 Vite 的高速开发，构建和迭代您的 SPA 将变得前所未有的简单和高效。

常见问题解答

• 如何在 React Router DOM 中使用动态路由？

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

function DynamicRoute() {
  const params = useParams();
  return (
    <div>
      <h1>Dynamic Route: {params.id}</h1>
    </div>
  );
}

• 如何防止导航到受保护的路由？

使用 <PrivateRoute> 组件，结合权限检查来限制对特定路由的访问。

• 如何处理 404 错误？

创建 <NoMatch> 组件作为无法匹配的路由的占位符。

• 如何使用 React Router DOM 进行嵌套路由？

使用 <Outlet> 和 <Route> 组件来嵌套路由，形成父子关系。

• 如何在 React Router DOM 中使用查询参数？

import { useSearchParams } from "react-router-dom";

function QueryParams() {
  const [searchParams] = useSearchParams();
  return (
    <div>
      <h1>Query Params: {searchParams.get("name")}</h1>
    </div>
  );
}