Reactjs render component without importing the navbar and style

Question

I am using react-dom-router to routes between my app components , I want to create a component (SeperatePageCompoenet) that when user navigate to the URL (http://localhost:3000/seperatePage), the compoenet will be rendered without using the imported "App.css" file, and does not include the compoenet that is rendered in App.js component.

This is my 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 File:-

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;

The purpose of this, i want to view a text with full view page, without using the background-color that has been set in App.css file, and without including the navbar in the page.

I think you need to wrap it in a higher-order-component. See if https://stackoverflow.com/questions/47281850/how-to-hide-navbar-in-login-page-in-react-router or https://stackoverflow.com/questions/53097610/how-to-hide-nav-bar-in-some-react-components is of any help — max, May 29 '20 at 04:59
@zirmax, it worked for me , except that background-color is still using the one that set in App.css file, even though i've shifted the import App.css from index.js to App.js — Q8root, May 29 '20 at 05:26
I guess the css is accessible for all your app, so you may need to overwrite it or only apply it to certain elements with a class selector. Easiest solution is to just overwrite your one components style with the background-color you want — max, May 29 '20 at 05:36
@zirmax have apply the style to a certain elements, now everything works fine, thanks. can you post your answer . — Q8root, May 29 '20 at 05:44

score 0 · Accepted Answer · answered May 29 '20 at 05:46

You can wrap it in a higher-order-component. See How to hide navbar in login page in react router or How to hide Nav bar in some react components

Since your css is available for all or your app, I suggest to simply overwrite the style for your SeperatePageComponent

Reactjs render component without importing the navbar and style

1 Answers1