CSS React 路由 – body 标签上不同的样式

在本文中，我们将介绍如何在使用 React 路由时为 body 标签应用不同的样式。React 路由是一种用于 web 应用程序的库，用于实现页面之间的导航和视图切换。通过使用 React 路由，我们可以在不刷新整个页面的情况下更新视图，使用户体验更加流畅。

阅读更多：CSS 教程

为什么需要在 body 标签上应用不同的样式？

在某些情况下，我们可能希望为不同的路由路径应用不同的样式。例如，我们可能希望在用户浏览主页时显示不同的背景颜色，而在用户浏览文章页面时显示不同的字体颜色。通过在 body 标签上应用不同的样式，我们可以轻松实现这些效果。

在 React 中使用 React 路由

在使用 React 路由之前，我们需要确保已经安装了 React 和 React 路由库。可以通过以下命令来安装这些依赖：

npm install react react-dom react-router-dom

安装完成后，我们可以在 React 组件中引入所需的依赖项：

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

接下来，我们可以在组件中定义路由路径和对应的组件：

import Home from './Home';
import About from './About';
import Article from './Article';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/article/:id" component={Article} />
      </Switch>
    </Router>
  );
}

在上面的代码中，我们定义了三个路由路径：主页路径（/）、关于页面路径（/about）和文章页面路径（/article/:id）。每个路径都与一个组件相关联，分别是 Home、About 和 Article 组件。

接下来，我们可以在相应的组件中定义需要应用的样式。

在 body 标签上应用不同的样式

为了在不同的路由路径上应用不同的样式，我们需要了解如何操作 body 标签的样式。在 React 中，可以通过在组件中使用第三方库react-helmet来实现这个目标。这个库允许我们在组件中动态地更改 head 标签的内容，包括样式表。

首先，我们需要安装react-helmet库。可以通过以下命令来安装：

npm install react-helmet

安装完成后，我们可以在相应的组件中引入react-helmet：

import { Helmet } from 'react-helmet';

接下来，在组件的 render 方法中，我们可以通过使用Helmet组件来动态地更改 head 标签的内容。下面的代码示例演示了如何在不同的路由路径上更改 body 标签的样式：

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

import Home from './Home';
import About from './About';
import Article from './Article';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/article/:id" component={Article} />
      </Switch>
      <Helmet>
        <style>{`
          body {
            background-color: #f2f2f2;
            color: #333;
          }

          .about-page body {
            background-color: #e6e6e6;
          }

          .article-page-1 body {
            font-size: 20px;
          }

          .article-page-2 body {
            font-size: 18px;
          }
        `}</style>
      </Helmet>
    </Router>
  );
}

在上面的代码中，我们在Helmet组件的样式标签中定义了不同路由路径上需要应用的样式。例如，当用户访问关于页面（/about）时，body 标签的背景颜色将设置为 #e6e6e6。