React 路由中上下文 Context 的应用

1. React 路由与 Context 基础概念

1.1 React 路由简介

React 路由是用于在 React 应用中实现页面导航和路由功能的重要工具。在单页应用（SPA）中，React 路由允许我们在不重新加载整个页面的情况下，根据不同的 URL 展示不同的组件。例如，常见的 React 路由库有 react - router - dom ，它提供了诸如 <Router> 、 <Route> 、 <Link> 等核心组件。

<Router> 组件是整个路由系统的顶层容器，它负责管理应用的历史记录，并根据 URL 的变化来匹配相应的 <Route> 。<Route> 组件定义了 URL 路径与组件之间的映射关系，当 URL 与 <Route> 的 path 属性匹配时，就会渲染对应的组件。<Link> 组件则用于创建可点击的导航链接，当用户点击链接时，会触发路由的切换。

下面是一个简单的 React 路由示例：

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

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

function App() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                </ul>

                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
            </div>
        </Router>
    );
}

export default App;

在这个示例中，当用户访问根路径 '/' 时，会渲染 Home 组件；当访问 '/about' 路径时，会渲染 About 组件。

1.2 Context 概念

Context 是 React 提供的一种在组件树中共享数据的方式，它可以让我们避免通过层层传递 props 的方式将数据传递到深层嵌套的组件中。在一些场景下，比如应用的主题、用户认证信息等，这些数据需要在多个组件中使用，如果通过常规的 props 传递，会导致组件树中大量组件都需要接收和传递这些与自身业务逻辑无关的 props ，代码变得臃肿且难以维护。

Context 由两个主要部分组成：Context.Provider 和 Context.Consumer 。Context.Provider 用于在组件树的某个位置提供数据，它接受一个 value 属性，这个属性的值就是要共享的数据。任何位于 Context.Provider 组件树内的组件，都可以通过 Context.Consumer 来获取这个共享的数据。

以下是一个简单的 Context 示例：

import React from'react';

// 创建 Context
const MyContext = React.createContext();

const Parent = () => {
    const contextValue = 'Hello, Context!';
    return (
        <MyContext.Provider value={contextValue}>
            <Child />
        </MyContext.Provider>
    );
};

const Child = () => (
    <MyContext.Consumer>
        {value => <div>{value}</div>}
    </MyContext.Consumer>
);

export default Parent;

在这个例子中，Parent 组件通过 MyContext.Provider 提供了 contextValue 数据，Child 组件通过 MyContext.Consumer 获取并展示了这个数据。

2. React 路由中 Context 的应用场景

2.1 共享路由相关数据

在 React 路由应用中，有些数据与路由状态紧密相关，并且需要在多个组件中共享。例如，当前路由的路径信息、路由参数等。通过 Context ，可以方便地将这些数据共享给需要的组件，而无需通过层层传递 props 。

假设我们有一个导航栏组件，它需要根据当前路由路径来高亮显示对应的菜单项。如果不使用 Context ，我们需要从顶层组件开始，将路由路径信息通过 props 传递给每一级组件，直到导航栏组件。而使用 Context ，我们可以在路由组件中通过 Context.Provider 提供路由路径信息，导航栏组件直接通过 Context.Consumer 获取该信息。

2.2 跨组件的路由控制

有时候，我们可能需要在一些非直接与路由相关的组件中，根据某些条件来控制路由的跳转。例如，在一个用户登录组件中，当用户登录成功后，需要跳转到特定的页面。通过 Context ，我们可以将路由的跳转函数（如 history.push ）共享给需要的组件，使得这些组件能够直接控制路由的变化，而无需通过复杂的事件传递机制。

3. 在 React 路由中实现 Context 应用

3.1 创建路由相关 Context

首先，我们需要创建一个用于共享路由相关数据的 Context 。以 react - router - dom 为例，我们可以创建一个 RouterContext 。

import React from'react';

// 创建路由相关 Context
const RouterContext = React.createContext();

export default RouterContext;

3.2 在路由组件中提供 Context

接下来，我们需要在路由组件中，通过 RouterContext.Provider 来提供路由相关的数据。我们可以在 App 组件（通常是路由的顶层组件）中进行设置。

import React from'react';
import { BrowserRouter as Router, Route, Link } from'react - router - dom';
import RouterContext from './RouterContext';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

function App() {
    const currentPath = window.location.pathname;
    return (
        <RouterContext.Provider value={{ currentPath }}>
            <Router>
                <div>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>

                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                </div>
            </Router>
        </RouterContext.Provider>
    );
}

export default App;

在这个例子中，我们将当前的路由路径 currentPath 通过 RouterContext.Provider 的 value 属性提供出去。

3.3 在其他组件中消费 Context

现在，我们可以在其他组件中，通过 RouterContext.Consumer 来获取共享的路由相关数据。比如，我们创建一个 Navigation 组件来展示导航栏，并根据当前路由路径高亮显示菜单项。

import React from'react';
import RouterContext from './RouterContext';

const Navigation = () => {
    return (
        <RouterContext.Consumer>
            {({ currentPath }) => (
                <ul>
                    <li className={currentPath === '/'? 'active' : ''}><a href="/">Home</a></li>
                    <li className={currentPath === '/about'? 'active' : ''}><a href="/about">About</a></li>
                </ul>
            )}
        </RouterContext.Consumer>
    );
};

export default Navigation;

在 Navigation 组件中，通过 RouterContext.Consumer 获取到 currentPath ，然后根据其值来判断是否给菜单项添加 active 类名，以实现高亮显示。

4. 传递路由操作函数到 Context

4.1 获取路由操作函数

在 react - router - dom 中，我们可以通过 useHistory 钩子函数来获取路由操作函数，如 history.push 用于跳转到指定路径。

import React from'react';
import { useHistory } from'react - router - dom';

const SomeComponent = () => {
    const history = useHistory();
    const handleClick = () => {
        history.push('/new - path');
    };
    return (
        <button onClick={handleClick}>Go to New Path</button>
    );
};

export default SomeComponent;

4.2 将操作函数放入 Context

我们可以将这个 history 对象放入 Context 中，以便在其他组件中使用。首先，修改 App 组件，将 history 放入 RouterContext 的 value 中。

import React from'react';
import { BrowserRouter as Router, Route, Link, useHistory } from'react - router - dom';
import RouterContext from './RouterContext';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

function App() {
    const history = useHistory();
    const currentPath = window.location.pathname;
    return (
        <RouterContext.Provider value={{ currentPath, history }}>
            <Router>
                <div>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>

                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                </div>
            </Router>
        </RouterContext.Provider>
    );
}

export default App;

4.3 在其他组件中使用 Context 中的操作函数

然后，在需要的组件中，通过 RouterContext.Consumer 获取 history 并使用其函数。例如，在一个 Login 组件中，登录成功后跳转到首页。

import React from'react';
import RouterContext from './RouterContext';

const Login = () => {
    const handleLogin = () => {
        // 模拟登录成功
        console.log('Login successful');
    };
    return (
        <RouterContext.Consumer>
            {({ history }) => (
                <form onSubmit={e => {
                    e.preventDefault();
                    handleLogin();
                    history.push('/');
                }}>
                    <input type="text" placeholder="Username" />
                    <input type="password" placeholder="Password" />
                    <button type="submit">Login</button>
                </form>
            )}
        </RouterContext.Consumer>
    );
};

export default Login;

在这个 Login 组件中，当用户点击登录按钮并登录成功后，通过从 Context 中获取的 history.push 函数跳转到首页。

5. Context 在嵌套路由中的应用

5.1 嵌套路由基础

在 React 路由中，我们常常会遇到嵌套路由的情况。例如，在一个博客应用中，我们可能有一个文章列表页面，当点击某篇文章时，会进入文章详情页面，而文章详情页面可能又有评论、相关文章等子路由。

下面是一个简单的嵌套路由示例：

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

const ArticleList = () => <div>Article List</div>;
const ArticleDetail = () => (
    <div>
        <h1>Article Detail</h1>
        <Route path="/article/:id/comment" component={Comment} />
        <Route path="/article/:id/related" component={RelatedArticle} />
    </div>
);
const Comment = () => <div>Comment Section</div>;
const RelatedArticle = () => <div>Related Articles</div>;

function App() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/articles">Articles</Link></li>
                </ul>

                <Route path="/articles" exact component={ArticleList} />
                <Route path="/article/:id" component={ArticleDetail} />
            </div>
        </Router>
    );
}

export default App;

在这个示例中，ArticleDetail 组件内部又定义了两个子路由，分别对应文章的评论和相关文章页面。

5.2 Context 在嵌套路由中的传递

在嵌套路由场景下，Context 的应用同样重要。我们可能需要将一些与父路由相关的数据，传递给子路由组件。例如，在上述博客应用中，文章详情页面的评论组件可能需要知道当前文章的 ID ，以便获取对应的评论数据。

我们可以通过在父路由组件中，将相关数据放入 Context ，然后子路由组件通过 Context.Consumer 获取数据。

import React from'react';
import { BrowserRouter as Router, Route, Link } from'react - router - dom';
import RouterContext from './RouterContext';

const ArticleList = () => <div>Article List</div>;
const ArticleDetail = () => {
    const match = useRouteMatch();
    const articleId = match.params.id;
    return (
        <RouterContext.Provider value={{ articleId }}>
            <div>
                <h1>Article Detail</h1>
                <Route path="/article/:id/comment" component={Comment} />
                <Route path="/article/:id/related" component={RelatedArticle} />
            </div>
        </RouterContext.Provider>
    );
};
const Comment = () => {
    return (
        <RouterContext.Consumer>
            {({ articleId }) => <div>Comments for article {articleId}</div>}
        </RouterContext.Consumer>
    );
};
const RelatedArticle = () => <div>Related Articles</div>;

function App() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/articles">Articles</Link></li>
                </ul>

                <Route path="/articles" exact component={ArticleList} />
                <Route path="/article/:id" component={ArticleDetail} />
            </div>
        </Router>
    );
}

export default App;

在这个例子中，ArticleDetail 组件通过 RouterContext.Provider 将当前文章的 articleId 提供出去，Comment 组件通过 Context.Consumer 获取 articleId 并展示相关信息。

6. 注意事项与最佳实践

6.1 Context 的性能问题

虽然 Context 提供了方便的数据共享方式，但过度使用或不正确使用可能会导致性能问题。Context 的更新会导致所有使用 Context.Consumer 的组件重新渲染，即使它们依赖的数据并没有改变。

为了避免不必要的重新渲染，可以使用 React.memo 来包裹使用 Context.Consumer 的组件。React.memo 是一个高阶组件，它会对组件的 props 进行浅比较，如果 props 没有变化，组件就不会重新渲染。对于使用 Context 的组件，我们可以将 Context 中的数据作为 props 传递给 React.memo 包裹的组件。

例如：

import React from'react';
import RouterContext from './RouterContext';

const MyComponent = React.memo(({ dataFromContext }) => (
    <div>{dataFromContext}</div>
));

const AnotherComponent = () => {
    return (
        <RouterContext.Consumer>
            {contextData => <MyComponent dataFromContext={contextData} />}
        </RouterContext.Consumer>
    );
};

export default AnotherComponent;

这样，只有当 contextData 发生变化时，MyComponent 才会重新渲染。

6.2 避免滥用 Context

Context 应该用于共享那些确实需要跨组件树传递的数据，而不是用于所有的数据共享场景。对于一些只在组件树中某几个相邻组件间共享的数据，使用常规的 props 传递可能更加合适，这样代码的数据流会更加清晰，也更容易维护。

在决定是否使用 Context 时，要仔细考虑数据的共享范围和使用场景，确保使用 Context 能够带来实际的好处，而不是增加代码的复杂性。

6.3 结合 Redux 与 Context

在大型应用中，我们可能会同时使用 Redux 进行状态管理和 Context 进行数据共享。Redux 适用于管理应用的全局状态，而 Context 则更侧重于在组件树中局部共享数据。

可以将 Redux 的部分状态通过 Context 传递给需要的组件，这样可以避免在所有组件中都连接 Redux 。例如，我们可以将用户认证信息存储在 Redux 中，然后通过 Context 将认证状态传递给一些与用户认证相关的组件，如导航栏中的登录/注销按钮组件。

首先，在 Redux 中获取用户认证状态：

import { useSelector } from'react - redux';

const UserAuthStatus = () => {
    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
    return isAuthenticated;
};

export default UserAuthStatus;

然后，通过 Context 传递这个状态：

import React from'react';
import UserAuthStatus from './UserAuthStatus';
import AuthContext from './AuthContext';

const App = () => {
    const isAuthenticated = UserAuthStatus();
    return (
        <AuthContext.Provider value={{ isAuthenticated }}>
            {/* 应用的其他部分 */}
        </AuthContext.Provider>
    );
};

export default App;

最后，在需要的组件中通过 AuthContext.Consumer 获取状态：

import React from'react';
import AuthContext from './AuthContext';

const Navigation = () => {
    return (
        <AuthContext.Consumer>
            {({ isAuthenticated }) => (
                <ul>
                    {isAuthenticated? <li><a href="/logout">Logout</a></li> : <li><a href="/login">Login</a></li>}
                </ul>
            )}
        </AuthContext.Consumer>
    );
};

export default Navigation;

通过这种方式，我们可以有效地结合 Redux 和 Context ，充分发挥它们各自的优势，提升应用的可维护性和性能。