React Router 面试教程：从基础到实战

React Router 是 React 应用中处理路由的标准库，也是前端面试中的高频考点。

项目结构分析

我们的示例项目使用了以下技术栈：

• React .
• React Router DOM .
• Vite .

router-demo/├── src/│ ├── App.jsx # 主应用组件，配置路由│ ├── main.jsx # 应用入口│ └── pages/│ ├── Home/│ │ └── index.jsx # 首页组件│ └── About/│ └── index.jsx # 关于页面组件├── package.json└── vite.config.js

一、基础概念

. 主要组件解析

import { BrowserRouter as Router,// 路由器组件，提供路由功能的上下文环境 Routes,// 路由容器。用来包裹所有的路由规则 Route // 单个路由规则，定义方法和对应的组件} from 'react-router-dom'

面试主要：

• BrowserRouter vs HashRouter 的区别
• Routes 是 React Router v6+ 的新特性，替代了 v5 的 Switch
• Route 的 element 属性用法

. 路由配置

function App { return }

面试问题：

• Q: 为什么需要 Router 包裹整个应用？
• A: 提供路由上下文，让子组件可以访问路由信息和导航方法

二、导航实现

. 声明式导航 - Link 组件

import { Link } from 'react-router-dom'const Home = => { return }

. 编程式导航 - useNavigate Hook

import { useNavigate } from 'react-router-dom'const Home = => { const navigate = useNavigate const handleClick = => { navigate } return }

面试对比：

• Link vs 标签的区别
• navigateuseNavigate的变化

// 动态路由
} />
// 获取参数
import { useParams } from 'react-router-dom'
const User = => {
const { id } = useParams
return 

User ID: {id}
}