面试题：React 中 React Router 实现基本页面导航的方式

安装 React Router：
- 首先确保项目中安装了 react - router - dom，如果没有，可以使用以下命令安装：
```
npm install react - router - dom
```
配置路由：
- 在项目的入口文件（通常是 index.js 或 App.js）中配置路由。以 App.js 为例：
```
import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react - router - dom';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/page1" element={<Page1 />} />
                <Route path="/page2" element={<Page2 />} />
            </Routes>
        </Router>
    );
}

export default App;
```
- 原理解释：
  - BrowserRouter as Router：BrowserRouter 是 react - router - dom 提供的用于处理浏览器历史记录的路由器组件，这里将其别名命名为 Router。它使用 HTML5 的 history API（pushState，replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。
  - Routes：用于定义一组路由。它会渲染与当前 URL 匹配的第一个子 Route。
  - Route：每个 Route 组件定义了一个路径（path）和当路径匹配时要渲染的组件（element）。例如，当 URL 为 /page1 时，会渲染 Page1 组件；当 URL 为 /page2 时，会渲染 Page2 组件。

添加导航链接：

在任意组件中添加导航链接，比如在 App.js 中添加：

import React from'react';
import { BrowserRouter as Router, Routes, Route, Link } from'react - router - dom';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/page1">Go to Page1</Link></li>
                    <li><Link to="/page2">Go to Page2</Link></li>
                </ul>
                <Routes>
                    <Route path="/page1" element={<Page1 />} />
                    <Route path="/page2" element={<Page2 />} />
                </Routes>
            </div>
        </Router>
    );
}

export default App;

原理解释：
- Link 组件来自 react - router - dom，它会生成一个 HTML 的 <a> 标签。当用户点击 Link 时，react - router - dom 会拦截默认的链接行为，使用 history API 更新 URL 而不会导致页面刷新，然后 Routes 组件会根据新的 URL 匹配并渲染相应的 Route 组件。

星途面试题库

面试题：React 中 React Router 实现基本页面导航的方式

知识考点

面试题答案