什么是路由？

在日常使用浏览器时，我们经常接触路由。例如，在地址栏输入www.example.com/home，浏览器能够准确找到首页内容；点击"关于我们"，地址栏变为www.example.com/about，页面显示相应信息。这一过程即为路由的基本工作原理：根据URL地址匹配并展示相应的页面。

在React应用中，大多数是单页应用（SPA），整个应用只有一个HTML文件，页面切换时不会重新加载服务器资源，而是通过JavaScript动态更新内容。React路由的作用就是管理URL和组件之间的映射关系，确保不同的URL显示不同的React组件。

React路由的核心：react-router-dom库

React本身不包含路由功能，需要借助第三方库react-router-dom来实现。这个库是React生态中最常用的路由解决方案，它简化了URL与组件的匹配逻辑，使得开发者可以轻松地处理导航问题。

示例：未使用react-router-dom的手动路由实现

function App() {
  const [currentUrl, setCurrentUrl] = React.useState(window.location.pathname);

  React.useEffect(() => {
    const handlePopState = () => setCurrentUrl(window.location.pathname);
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  return (
    <div>
      <button onClick={() => history.pushState({}, '', '/main')}>主页</button>
      <button onClick={() => history.pushState({}, '', '/contact')}>联系我们</button>
      {currentUrl === '/main' && <Main />}
      {currentUrl === '/contact' && <Contact />}
    </div>
  );
}

这种手动实现不仅繁琐，还需要额外处理历史记录等问题。而react-router-dom提供了更简洁的方式。

React Router的核心组件

安装react-router-dom

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

BrowserRouter：路由容器

所有路由相关的组件都需要包裹在<BrowserRouter>内，通常简写为<Router>。

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

function App() {
  return (
    <Router>
      <div className="App">
        {/* 路由相关内容 */}
      </div>
    </Router>
  );
}

Route：定义URL与组件的关系

<Route>用于定义URL路径与对应组件的关系。

import { Route } from 'react-router-dom';
import Main from './Main';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <Route path="/main" element={<Main />} />
      <Route path="/contact" element={<Contact />} />
    </Router>
  );
}

Link：无刷新导航链接

<Link>代替传统的<a>标签，避免页面刷新。

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

function Navigation() {
  return (
    <nav>
      <Link to="/main">主页</Link>
      <Link to="/contact">联系我们</Link>
    </nav>
  );
}

Routes：路由匹配容器

为了更好地管理路由，推荐使用<Routes>包裹所有<Route>组件，并添加404页面处理。

import { Routes, Route } from 'react-router-dom';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/main" element={<Main />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

进阶用法

嵌套路由

通过在父组件的路径后添加/*，并在子组件中使用<Outlet>来实现嵌套路由。

// 父组件
function Products() {
  return (
    <div>
      <h1>产品列表</h1>
      <nav>
        <Link to="phone">手机</Link>
        <Link to="laptop">笔记本电脑</Link>
      </nav>
      <Outlet />
    </div>
  );
}

动态路由

利用:paramName来捕获URL中的变量部分。

<Route path="/product/:id" element={<ProductDetail />} />

function ProductDetail() {
  let { id } = useParams();
  return <h1>产品ID: {id}</h1>;
}

编程式导航

使用useNavigate钩子进行代码级别的导航控制。

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

function Login() {
  let navigate = useNavigate();

  function handleClick() {
    navigate('/main');
  }

  return <button onClick={handleClick}>登录</button>;
}