React Router 简介

React Router 是一个基于 React 的库，用于在单页应用（SPA）中实现路由管理。它允许你为不同的路径定义组件，并在用户访问这些路径时渲染相应的组件。

使用场景

• 动态路由：例如，在电商网站中，商品详情页可能需要根据商品ID动态生成路径。
• 页面跳转：在应用内部实现页面跳转，而不需要重新加载整个页面。
• 导航栏：创建一个可交互的导航栏，用户点击链接时，应用会跳转到相应的页面。

安装

npm install react-router-dom

基本用法

路由配置

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

组件跳转

import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>首页</h1>
      <Link to="/about">关于我们</Link>
    </div>
  );
}

动态路由

function ProductDetail({ match }) {
  const { params } = match;
  return <h1>产品详情：{params.id}</h1>;
}

扩展阅读

更多关于 React Router 的信息，请访问我们的官方文档。

[center]