React 框架与路由配置

冻梨政哥
55 阅读3分钟

React 框架与路由配置

React 框架简介

React 是目前最流行的现代前端开发框架之一，以其响应式、组件化和高效的数据绑定等特性受到广泛应用。它将页面拆分为独立可复用的组件，通过组件的组合与嵌套构建复杂的用户界面。

在项目中，我们通常使用 Vite 作为构建工具来初始化 React 项目，它基于 ES 模块（ESM）提供极致的冷启动速度和高效的开发体验。通过npm init vite命令可以快速拉取项目模板，开发阶段使用npm run dev启动开发服务器，实现热更新等便捷功能。

React 项目的核心依赖包括：

  • react：框架核心，提供组件化和响应式状态管理等基础功能
  • react-dom：负责将 React 组件渲染到 DOM 中

React 核心特性实践

组件化开发

React 应用由多个组件构成，每个组件都是一个独立的功能单元。例如项目中的Home和About组件：

// About组件示例
const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  )
}
export default About

响应式状态管理

使用useState钩子可以实现组件的状态管理，当状态变化时，React 会自动重新渲染组件：

// 在Home组件中使用useState
const [repos, setRepos] = useState([]);

副作用处理

useEffect钩子用于处理组件的副作用操作，如 API 请求、定时器等。第二个参数为空数组表示只在组件挂载后执行一次：

// 在Home组件中发起API请求
useEffect(() => {
  console.log('组件挂载后');
  fetch('https://api.github.com/users/shunwuyu/repos')
    .then(res => res.json())
    .then(data => {
      setRepos(data);
    });
}, [])

React Router 路由配置

路由是单页应用（SPA）的核心功能，负责管理不同 URL 对应的页面组件。

安装路由

通过 npm 安装 react-router-dom：

npm i react-router-dom

路由配置步骤

  1. 引入路由组件：
import {
  BrowserRouter as Router,
  Link,
  Routes,
  Route
} from 'react-router-dom'
  1. 配置路由容器：在根组件中使用Router包裹整个应用，使路由功能在应用中生效：
function App() {
  return (
    <Router>
      {/* 导航和路由内容 */}
    </Router>
  )
}
  1. 创建导航链接：使用Link组件代替传统的<a>标签，实现无刷新导航：
<nav>
  <ul>
    <li><Link to='/'>Home</Link></li>
    <li><Link to='/about'>About</Link></li>
  </ul>
</nav>
  1. 配置路由规则：通过Routes和Route组件定义 URL 路径与组件的映射关系：
export default function AppRoutes() {
  return (
    <Routes>
      <Route path='/' element={<Home/>}></Route>
      <Route path='/about' element={<About/>}></Route>
    </Routes>
  )
}

路由模式

React Router 提供两种主要路由模式：

  • BrowserRouter：使用 HTML5 的 history API，URL 形式与后端路由一致，现代浏览器推荐使用
  • HashRouter：URL 中包含#符号，兼容性更好，适合旧浏览器

项目结构说明

  • main.jsx：应用入口文件，负责将根组件挂载到 DOM
  • App.jsx：根组件，包含路由配置和全局导航
  • router/index.jsx：集中管理路由规则
  • pages/：存放页面级组件，如 Home 和 About
  • 样式文件：使用 CSS 或 Stylus（通过 Vite 编译）管理样式

通过以上配置，我们可以构建一个具有路由功能的 React 单页应用，实现页面之间的无刷新切换，提供流畅的用户体验。

avatar
文章
阅读
粉丝