React-Bits路由管理：单页面应用导航

霍美予Mabel

279人浏览 · 2025-10-10 05:53:21

霍美予Mabel · 2025-10-10 05:53:21 发布

React-Bits路由管理：单页面应用导航

【免费下载链接】react-bits ✨ React patterns, techniques, tips and tricks ✨ 项目地址: https://gitcode.com/gh_mirrors/re/react-bits

你是否在开发单页面应用时遇到过页面跳转混乱、URL与视图不匹配的问题？本文将通过React-Bits项目中的实用模式，带你从零构建清晰的路由管理系统，解决导航状态同步、代码分割等核心痛点。读完本文你将掌握：组件切换路由实现、基于Context的状态共享、容器组件与展示组件分离的路由架构。

路由核心：组件切换模式

React-Bits提供的组件切换模式是实现路由的基础。这种模式通过一个映射对象将路径与组件关联，根据当前状态动态渲染不同组件。

import HomePage from './HomePage.jsx';
import AboutPage from './AboutPage.jsx';
import UserPage from './UserPage.jsx';
import FourOhFourPage from './FourOhFourPage.jsx';

const PAGES = {
  home: HomePage,
  about: AboutPage,
  user: UserPage
};

const Page = (props) => {
  const Handler = PAGES[props.page] || FourOhFourPage;
  return <Handler {...props} />
};

Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
};

上述代码来自patterns/13.component-switch.md，它展示了如何创建一个根据page属性动态渲染不同页面组件的Page组件。这种模式的优势在于：

集中管理路由与组件的映射关系
内置404页面处理机制
通过PropTypes提供类型检查，避免无效路由

路由状态管理：容器与展示组件分离

在路由实现中，我们需要区分容器组件与展示组件的职责。容器组件负责管理路由状态和数据逻辑，展示组件专注于UI渲染。

容器组件实现

// RouterContainer.jsx
import { useState, useEffect } from 'react';
import Page from './Page';

export default function RouterContainer() {
  const [currentPath, setCurrentPath] = useState(window.location.hash.slice(1) || 'home');

  useEffect(() => {
    const handleHashChange = () => {
      setCurrentPath(window.location.hash.slice(1) || 'home');
    };
    
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  return <Page page={currentPath} />;
}

展示组件实现

// Navigation.jsx
export default function Navigation() {
  return (
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于我们</a>
      <a href="#user">用户中心</a>
    </nav>
  );
}

这种分离模式的详细说明可参考patterns/8.presentational-vs-container.md。通过将路由状态管理放在容器组件，我们实现了：

路由逻辑的集中维护
展示组件的复用性提升
更清晰的测试边界

全局路由状态：Context Wrapper模式

当应用规模增长，路由状态需要在多个组件间共享时，Context Wrapper模式能有效解决跨组件通信问题。

// RouterContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';

const RouterContext = createContext();

export function RouterProvider({ children }) {
  const [currentPath, setCurrentPath] = useState(window.location.hash.slice(1) || 'home');

  useEffect(() => {
    const handleHashChange = () => {
      setCurrentPath(window.location.hash.slice(1) || 'home');
    };
    
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  const navigate = (path) => {
    window.location.hash = path;
  };

  return (
    <RouterContext.Provider value={{ currentPath, navigate }}>
      {children}
    </RouterContext.Provider>
  );
}

export function useRouter() {
  return useContext(RouterContext);
}

上述实现基于patterns/4.context-wrapper.md中的依赖注入思想，通过Context API提供全局路由状态。使用时只需在组件中调用useRouter()即可获取当前路径和导航方法：

// 使用示例
function Navigation() {
  const { currentPath, navigate } = useRouter();
  
  return (
    <nav>
      <button 
        onClick={() => navigate('home')}
        className={currentPath === 'home' ? 'active' : ''}
      >
        首页
      </button>
      {/* 其他导航项 */}
    </nav>
  );
}