React Router常见面试题目

1. React Router 支持哪几种模式?

React Router 支持以下两种主要模式：

1. BrowserRouter (基于 HTML5 History API 的模式)

   • 原理：
     • 利用 history.pushState 和 history.replaceState 操作浏览器历史栈，无需重新加载页面。
     • URL 看起来像传统 URL，如 /home。
   • 优点：
     • URL 结构简洁美观。
     • SEO 友好。
   • 缺点：
     • 需要服务器配置支持，否则刷新页面时会导致 404。

2. HashRouter (基于 URL 哈希的模式)

   • 原理：
     • URL 中的 # 和其后内容不会被发送到服务器，浏览器通过 window.location.hash 检测路由变化。
     • 示例 URL：/index.html#/home。
   • 优点：
     • 不需要服务器配置，支持直接在本地文件系统中打开。
   • 缺点：
     • URL 不够美观，不适合 SEO。

---

2. React Router 中的 Router 组件有几种类型?

常见的 Router 组件类型：

1. BrowserRouter
   使用 HTML5 history 模式，提供更清晰的 URL。
2. HashRouter
   使用哈希模式，适用于不需要服务器支持的项目。
3. MemoryRouter
   存储在内存中的路由，不与浏览器地址栏同步，适用于测试环境。
4. StaticRouter
   用于服务器端渲染 (SSR)，路由配置是静态的。
5. NativeRouter
   React Native 使用的路由组件。

---

3. 在 React Router 的 history 模式中，push 和 replace 方法有什么区别?

• push 方法：

  • 在浏览器历史记录栈中添加一个新条目。
  • 用户可以通过浏览器的后退按钮返回到之前的页面。
  • 示例：

    import { useHistory } from 'react-router-dom';
    const history = useHistory();
    history.push('/new-route');
    

• replace 方法：

  • 替换当前历史记录栈中的条目。
  • 不会新增历史记录，后退按钮无法返回到之前的页面。
  • 示例：

    import { useHistory } from 'react-router-dom';
    const history = useHistory();
    history.replace('/new-route');
    

---

4. React Router 中的 Switch 有什么作用?

• 作用：
  Switch 用于确保只有第一个匹配的路由会被渲染。
• 原理：
  遍历 Switch 内的子 Route，找到第一个 path 匹配的 Route 并渲染，忽略后续路由。
• 示例：

  import { Switch, Route } from 'react-router-dom';
  <Switch><Route path="/home" component={Home} /><Route path="/about" component={About} /><Route component={NotFound} /> {/* 兜底处理 */}
  </Switch>
  

• 好处：
  避免多个路由同时渲染，提高路由匹配效率。

---

5. React Router 支持的路由模式有哪些?

React Router 支持的模式：

1. HTML5 history 模式（BrowserRouter）。
2. 哈希模式（HashRouter）。
3. 内存模式（MemoryRouter，通常用于测试或无浏览器环境）。

---

6. 什么是 React Router ? 常用的 Router 组件有哪些?

• React Router 是一个路由库，用于在 React 应用中实现单页面应用（SPA）的路由功能。
• 常用的 Router 组件：
  1. BrowserRouter
  2. HashRouter
  3. MemoryRouter
  4. StaticRouter
  5. NativeRouter (React Native)

---

7. React Router 的路由是什么?它和普通路由有什么区别?有什么优缺点?

• React Router 的路由：

  • React Router 的路由是组件化的，通过 Route 组件定义路径和对应的组件。
  • 示例：

    import { BrowserRouter as Router, Route } from 'react-router-dom';
    <Router><Route path="/home" component={Home} />
    </Router>
    

• 区别：

  特性	React Router 路由	普通路由
  更新机制	单页面应用，组件重新渲染	整个页面重新加载
  URL 样式	可定制 URL	静态路径或文件映射
  用户体验	快速切换，无刷新	切换时刷新页面，速度较慢

• 优点：

  1. 用户体验好，页面切换快速。
  2. 易于动态加载组件，实现按需加载。
  3. 路由配置灵活，适合复杂应用。

• 缺点：

  1. SEO 支持需要额外配置（如 SSR）。
  2. URL 和组件的关联需要开发者手动维护。

---

8. 如何在 React 路由中实现动态加载模块，以实现按需加载?

可以使用 React 的 lazy 和 Suspense 组件来实现按需加载：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));function App() {return (<Router><Suspense fallback={<div>Loading...</div>}><Route path="/home" component={Home} /><Route path="/about" component={About} /></Suspense></Router>);
}

• 原理：
  1. 当路由匹配时，组件才会动态加载。
  2. 提高初始页面加载速度，减少不必要的资源加载。

---

9. React Router 的路由变化时，如何重新渲染同一个组件?

当路由变化但仍在同一组件时，可以使用以下方法触发重新渲染：

1. 使用 useEffect 监听路由参数变化：

   import { useParams } from 'react-router-dom';
   import { useEffect } from 'react';function MyComponent() {const { id } = useParams();useEffect(() => {console.log(`Route parameter changed: ${id}`);}, [id]);return <div>Current ID: {id}</div>;
   }
   

2. 强制更新组件：
   如果路由参数未变化但需要强制刷新，可以使用 key 属性：

   import { useLocation } from 'react-router-dom';function MyComponent() {const location = useLocation();return <div key={location.pathname}>My Component</div>;
   }
   

---

以上是关于 React Router 的详细解答与示例，希望能帮助你更好地理解和应用它！

1. 如何在 React Router 中设置重定向?

在 React Router 中，可以通过以下两种方式实现重定向：

1.1 使用 <Navigate> 组件

在 React Router v6 中，使用 <Navigate> 组件来重定向：

import { Navigate } from 'react-router-dom';function App() {return (<Routes><Route path="/home" element={<Home />} /><Route path="/" element={<Navigate to="/home" />} /></Routes>);
}

1.2 使用 useNavigate Hook

通过 useNavigate 手动触发重定向：

import { useNavigate } from 'react-router-dom';function Login() {const navigate = useNavigate();const handleLogin = () => {// 登录逻辑navigate('/dashboard');};return <button onClick={handleLogin}>Login</button>;
}

---

2. 在 React Router 中如何获取 URL 参数?

2.1 使用 useParams Hook

useParams 是 React Router 提供的 Hook，用于获取动态路由参数：

import { useParams } from 'react-router-dom';function UserDetail() {const { userId } = useParams();return <div>User ID: {userId}</div>;
}

2.2 示例路由

<Routes><Route path="/user/:userId" element={<UserDetail />} />
</Routes>

访问 /user/123 会显示 User ID: 123。

---

3. 如何配置 React Router 实现路由切换?

3.1 配置路由

使用 Routes 和 Route 配置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Router>);
}

3.2 路由切换

使用 <Link> 或 <NavLink> 组件触发切换：

import { Link } from 'react-router-dom';function Navbar() {return (<nav><Link to="/">Home</Link><Link to="/about">About</Link></nav>);
}

---

4. React Router 4 和 React Router 3 有哪些变化?新增了哪些特性?

4.1 主要变化

• 组件化设计：

  • React Router 4 使用完全组件化的设计，每个路由都是一个组件。
  • React Router 3 使用集中式配置方式。

• 嵌套路由的实现：

  • React Router 4：嵌套路由通过组件嵌套实现。
  • React Router 3：嵌套路由通过静态配置实现。

• Switch 组件：

  • React Router 4 引入了 <Switch>，用于匹配第一个符合条件的路由。

• 动态路由加载：

  • React Router 4 支持动态导入组件，优化加载性能。

4.2 示例对比

React Router 3 配置路由：

import { Router, Route, browserHistory } from 'react-router';<Router history={browserHistory}><Route path="/" component={App}><Route path="about" component={About} /></Route>
</Router>;

React Router 4 配置路由：

<BrowserRouter><Routes><Route path="/" element={<App />} /><Route path="/about" element={<About />} /></Routes>
</BrowserRouter>;

---

5. 在 React Router 中如何获取历史对象?

5.1 使用 useNavigate Hook

React Router v6 提供 useNavigate 代替 history：

import { useNavigate } from 'react-router-dom';function Component() {const navigate = useNavigate();const goBack = () => navigate(-1);return <button onClick={goBack}>Go Back</button>;
}

5.2 v5 及更早版本的 history

早期版本使用 useHistory 获取 history 对象：

import { useHistory } from 'react-router-dom';function Component() {const history = useHistory();history.push('/home');
}

---

6. React Router 的实现原理是什么?

React Router 的核心是监听 URL 变化，并根据匹配规则动态渲染对应的组件。

6.1 核心原理

• 路由监听：
  通过 window.history 或 window.location.hash 监听 URL 的变化。
• 匹配规则：
  使用 path-to-regexp 库将路径转换为正则表达式，匹配当前 URL。
• 渲染更新：
  匹配的路由组件通过 React 的状态更新机制触发重新渲染。

6.2 关键步骤

1. 路由定义时，存储路径与组件的映射关系。
2. URL 变化时，根据路径规则找到对应组件。
3. 使用 React 渲染匹配的组件。

---

7. React 路由切换时，如果同一组件无法重新渲染，有哪些方法可以解决?

7.1 监听参数变化

使用 useEffect 或 componentDidUpdate 监听参数变化：

import { useParams } from 'react-router-dom';function Component() {const { id } = useParams();useEffect(() => {console.log(`Route parameter changed: ${id}`);}, [id]);return <div>Current ID: {id}</div>;
}

7.2 强制重新渲染

通过更改组件的 key 强制重新渲染：

import { useLocation } from 'react-router-dom';function Component() {const location = useLocation();return <div key={location.pathname}>My Component</div>;
}

7.3 手动清理状态

在参数变化时清理状态，触发组件重新渲染：

useEffect(() => {setState(null); // 清理状态
}, [id]);

---

8. React Router 中的 Link 标签和 HTML 的 a 标签有什么区别?

8.1 区别

特性	<Link>	<a>
页面刷新	不刷新页面	刷新页面
性能	单页面跳转，速度更快	每次跳转都重新加载资源
路由支持	集成 React Router 路由	不支持
SEO 支持	同样支持	支持

8.2 示例对比

使用 <a> 标签：

<a href="/about">About</a>

每次点击都会刷新页面。

使用 <Link> 标签：

import { Link } from 'react-router-dom';<Link to="/about">About</Link>

点击不会刷新页面，仅更新路由。

---

以上是关于 React Router 各个问题的详细解答及代码示例，希望能够帮助你深入理解和应用 React Router！