Reactjs 渲染组件而不导入导航栏和样式答案

【问题标题】：Reactjs render component without importing the navbar and styleReactjs 渲染组件而不导入导航栏和样式
【发布时间】：2020-09-16 14:37:12
【问题描述】：

我正在使用 react-dom-router 在我的应用程序组件之间进行路由，我想创建一个组件（SeperatePageCompoenet），当用户导航到 URL（http://localhost:3000/seperatePage）时，将在不使用导入的“App.css”文件的情况下呈现组件，并且不包括在 App.cs 中呈现的组件。 js 组件。

这是我的 index.js 组件：-

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "bootstrap-v4-rtl/dist/css/bootstrap-rtl.css";
import "bootstrap-v4-rtl/dist/js/bootstrap.js";
import "./App.css";
import { BrowserRouter } from "react-router-dom";
//import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js 文件：-

import React from "react";
import Header from "./components/Header";
import Home from "./pages/Home";
import About from "./pages/About";
import Login from "./pages/Login";
import Account from "./pages/Account";
import Contact from "./pages/Contact";
import NewPost from "./pages/NewPost";
import Test from "./pages/Test";
import { Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Signup from "./pages/Signup";
import Post from "./pages/Post";

function App() {
  return (
    <div>
      <Header />
      <NavBar />
      <div className="container rtl">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/create-new" component={NewPost} />
          <Route path="/contact-us" component={Contact} />
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
          <Route path="/account" component={Account} />
          <Route path="/post/:id" component={Post} />
          <Route path="/test" component={Test} />
        </Switch>
      </div>
    </div>
  );
} 
export default App;

这样做的目的是，我想以完整视图页面查看文本，而不使用在 App.css 文件中设置的背景颜色，并且不包括页面中的导航栏。

【问题讨论】：

我认为你需要将它包装在一个高阶组件中。看看stackoverflow.com/questions/47281850/… 或stackoverflow.com/questions/53097610/… 是否有帮助
@zirmax，我去看看
@zirmax，它对我有用，除了背景颜色仍在使用 App.css 文件中设置的颜色，即使我已将导入 App.css 从 index.js 转移到应用.js
我猜你的所有应用程序都可以访问 css，所以你可能需要覆盖它或者只使用类选择器将它应用于某些元素。最简单的解决方案是用你想要的背景颜色覆盖你的一个组件样式
@zirmax 已将样式应用于某些元素，现在一切正常，谢谢。你能发表你的答案吗？

标签： reactjs

【解决方案1】：

您可以将它包装在一个高阶组件中。见How to hide navbar in login page in react router或How to hide Nav bar in some react components

由于您的 css 可用于所有或您的应用程序，我建议简单地覆盖您的 SeperatePageComponent 的样式

【讨论】：