面试题：React中如何使用Hook管理路由状态之基础实现

Question

在一个简单的React应用中，假设使用React Router进行路由管理，请阐述如何利用useState和useEffect Hook来管理路由状态，比如根据当前路由显示不同的页面标题。请给出关键代码示例及解释。

Answer 1

1. 安装依赖

确保已经安装了 react-router-dom，如果没有安装，可以使用以下命令安装：

npm install react-router-dom

2. 关键代码示例

import React, { useState, useEffect } from'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from'react-router-dom';

// 假设的页面组件
const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

const App = () => {
  const location = useLocation();
  const [pageTitle, setPageTitle] = useState('');

  useEffect(() => {
    if (location.pathname === '/') {
      setPageTitle('Home');
    } else if (location.pathname === '/about') {
      setPageTitle('About');
    }
  }, [location]);

  useEffect(() => {
    document.title = pageTitle;
  }, [pageTitle]);

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

export default App;

3. 代码解释

• useLocation：这是 react-router-dom 提供的一个 Hook，用于获取当前的路由位置信息。每次路由变化时，location 对象会更新。
• useState：用于在函数组件中添加状态。这里我们使用 pageTitle 状态来存储当前页面的标题，并使用 setPageTitle 来更新这个状态。
• 第一个 useEffect：依赖于 location，意味着每次路由变化（location 更新）时，这个 useEffect 会被触发。根据当前的 location.pathname，设置 pageTitle 为相应的值。
• 第二个 useEffect：依赖于 pageTitle，当 pageTitle 更新时，会将 document.title 设置为 pageTitle 的值，从而实现根据路由显示不同的页面标题。
• Router、Routes 和 Route：这些是 react-router-dom 中的组件，用于定义应用的路由结构。Routes 组件包含多个 Route 组件，每个 Route 组件定义了一个路径和对应的组件。