Question

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

这是我的index.js compoenet：-

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文件中设置的背景色，并且不包括页面中的导航栏。

Answer 1

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

由于您的CSS适用于所有或您的应用程序，因此建议您简单覆盖SeperatePageComponent

的样式

ReactJS渲染组件无需导入导航栏和样式

1 个答案: