React Router是什么？你如何使⽤它来实现单⻚⾯应⽤的路由？

React Router是⼀款⽤于构建单⻚⾯应⽤（SPA）中处理路由的JavaScript库。它允许开发者在不刷新整个⻚⾯的情况下进⾏交互式的⽤⼾体验，是React⽣态系统中⾮常受欢迎的第三⽅库之⼀。 React Router不仅提供简单的URL路由管理功能，还帮助开发者构建复杂的SPA，包括定义⻚⾯之间的导航关系、处理⻚⾯参数传递、实现路由守卫和权限控制、进⾏代码分割和懒加载优化，甚至⽀持服 务端渲染（SSR）。

以下是使⽤React Router实现单⻚⾯应⽤路由的基本步骤：

1. 安装React Router：

你可以通过npm或yarn来安装React Router。通常，我们会安装 react-router-dom ，这是React Router的DOM绑定版本，⽤于在浏览器中运⾏。

npm install react-router-dom
# 或者
yarn add react-router-dom

2. 引⼊React Router组件：

在你的React组件中，你需要引⼊React Router的组件，如 <BrowserRouter> 、 <Route> 、 <Link> 等。

3. 配置路由：

使⽤ <BrowserRouter> 组件作为路由的根容器，然后在其中定义⼀系列的 <Route> 组件，每个<Route> 组件都指定⼀个 path 属性和⼀个 component 属性，分别表⽰要匹配的URL路径和要渲 染的组件

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Repos from './Repos';

function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/repos">Repos</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/repos">
<Repos />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;

注意：在上⾯的例⼦中，我还引⼊了 <Switch> 组件，它⽤于确保只渲染与当前URL匹配的第⼀个<Route> 。

4. 嵌套路由：

如果你的应⽤需要嵌套路由（即在⼀个路由组件内部再定义⼦路由），你可以在 <Route> 组件内部 再定义 <Route> 组件。

5. 动态路由和参数传递：

你可以使⽤ :paramName 的形式来定义动态路由，并通过 this.props.match.params 来访问传递的参数。

6. 编程式导航：

除了使⽤ <Link> 组件进⾏声明式导航外，你还可以使⽤React Router的API（如history.push ）进⾏编程式导航。

React Router功能强⼤且灵活，通过合理配置和使⽤，可以⽅便地实现单⻚⾯应⽤的路由管理。

程序员玫玫：堪称2024最强的前端面试场景题，已帮助512人成功拿到offer