React路由入门：从Vue2.0到React17

2023-12-17 11:23:35

React作为目前最流行的前端框架之一，拥有强大的生态系统和丰富的功能，而路由作为单页面应用程序中的关键特性，可以帮助我们管理页面跳转和应用程序状态。如果你之前使用过Vue Router，那么本文将带你从Vue Router到React Router，了解React路由的基本概念，让你能够轻松上手，构建功能强大的React应用。

在React中，路由管理由专门的库来完成，最流行的当属react-router-dom。该库提供了丰富的API，可以满足我们绝大多数的路由需求。和Vue Router类似，React Router的核心概念包括：

组件： React Router使用组件的方式管理路由。每个路由都对应一个组件，当路由匹配当前路径时，就会渲染该组件。

导航： React Router提供了多种导航的方式，包括<Link>组件、useNavigate和useLocation钩子，可以轻松地在应用程序的不同页面之间跳转。

地址配置： React Router允许我们通过<Route>组件来配置路由地址。我们可以指定匹配的路径、组件和可选的配置。

为了帮助你更好地理解React路由，我们接下来将通过一个简单的示例，带你一步步构建一个React路由应用。

示例：创建一个简单的博客应用程序

创建一个新的React项目。

npx create-react-app my-blog

安装react-router-dom。

npm install react-router-dom

在App.js文件中，导入BrowserRouter和Route组件。

import { BrowserRouter, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </BrowserRouter>
  );
}

export default App;