【React】react-router 路由详解

React Router 是一个用于 React 应用程序的路由库，它允许你定义应用程序中页面的路由。

安装：

npm install react-router-dom

基本使用：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;
 
function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>
 
        {/* 路由配置 */}
        <Route path="/" exact component={Home} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
      </div>
    </Router>
  );
}
 
export default AppRouter;

在这个例子中，我们定义了三个组件 Home、About 和 Users，并通过 Router 中的 Route 组件定义了路由。Link 组件用于创建导航链接，当用户点击时，会导航到相应的路由。

exact 属性用于确保路由匹配是精确的，避免路由冲突。

这只是 React Router 功能的一个简单介绍，实际应用中可能会涉及更多高级功能，如代码分割路由（React.lazy 与 Suspense）、路由参数、Redirection、自定义路由组件等。