如何独立设置每个 React 路由的样式？

【问题标题】：How to style each React route independently?如何独立设置每个 React 路由的样式？
【发布时间】：2020-05-25 01:21:47
【问题描述】：

我是 React 和 React Router 的新手，我在路由样式方面遇到了一些麻烦。所以基本上我有两条路线：主页和管理页面。我要做的就是设置正文的样式，以便在管理页面中所有内容都居中。问题是每次我为正文设置样式时，所有样式也会转到主页。那么我该如何解决这个问题呢？

【问题讨论】：

您是否将整个文档正文居中？
这就是我想做的。但仅适用于管理路由，并非所有路由。
你能展示你的示例代码吗？
为什么不为包装了代表管理路由的组件的 JSX 的 Container DIV 这样做呢？我的意思是而不是body {}
管理路径的任何代码都有助于描述正确的解决方案

标签： javascript html css reactjs react-router

【解决方案1】：

您可能会在 app.js 文件中应用样式，其中实现了 BrowserRouter。这是你可以做的。将您的Home/Main 页面创建为：

import React from "react";

const Home = () => {
  return <div style={{textAlign: "center" }}>Home</div>
}

export default Home;

将您的Admin 页面创建为：

import React from "react";

const Admin = () => {
  return <div>Admin</div>
}

export default Admin;

最后，将您的app.js 文件创建为：

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Admin from "./Admin";
import Admin from "./Home";

const App = () => {
  return <BrowserRouter>
      <Switch>
        <Route path="/admin" component={Admin} />
        <Route path="/" exact component={Home} />
      </Switch>
    </BrowserRouter>
}

export default App;

这样，您唯一的Home 页面内容居中对齐。希望这会对你有所帮助。

【讨论】：