CODEWITHSUNDEEP
reactjsreact-router
Cristian Ciacu
Cristian Ciacu

Reputation: 43

How to not display navbar on specific pages?

I am trying to build a multiple page app and I struggle at setting up the routes. As you can see from the code, there are a navbar, a footer and a switch statement. The last line of the switch tag is the not found page and on that page I want that none of the navbar or footer to be displayed. I could not find a way to make it happen.

<Router>
   <NavbarPage />
   <Switch>
      <Route exact path="/" component={MyComponent} />
      <Route path="/services/" component={ServiciiPage} />
      <Route path="/contact/" component={Contact} />
      <Route path="/portfolio" component={Portfolio} />
      <Route component={My404Component} />
   </Switch>
   <Footer />
</Router>

Upvotes: 3

Views: 3072

Answers (1)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

Create a set of Routes for the components that you want to display normally with the Navbar and Footer. Do something like the following:

class App extends React.Component{
    render(){
        const DefaultRoutes = () => {
            return(
                <div>
                    <NavbarPage/>
                    <Switch>
                      <Route exact path="/" component={MyComponent} />
                      <Route path="/services/" component={ServiciiPage} />
                      <Route path="/contact/" component={Contact} />
                      <Route path="/portfolio" component={Portfolio} />         
                    </Switch>                                                                                                           
                    <Footer/>
                </div>
            )
        }

        return(
            <Router>
                <Switch>
                    <Route component={DefaultRoutes}/>
                </Switch>
            </Router>
        )
    }
}

By separating the routes like this, the Switch component will try to find a Route in DefaultRoutes that matches the url. If it does, then it will render the layout with the Navbar and Footer.

Now, let's create a RedirectToNotFound component like this:

import React from "react";
import { Redirect } from "react-router-dom";

const RedirectToNotFound = () => {
  return <Redirect to="/notfound" />;
};

export default RedirectToNotFound;

Now when the user goes to a unnamed route, it will navigate to this component, which will redirect to the 404 Component.

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import My404Component from "./My404Component";
import NavbarPage from "./NavbarPage";
import Footer from "./Footer";
import MyComponent from "./MyComponent";
import RedirectToNotFound from "./RedirectToNotFound";

import "./styles.css";

class App extends React.Component {
  render() {
    const DefaultRoutes = () => {
      return (
        <div>
          <NavbarPage />
          <Switch>
            <Route exact path="/" component={MyComponent} />
            <Route path="/services/" component={ServiciiPage} />
            <Route path="/contact/" component={Contact} />
            <Route path="/portfolio" component={Portfolio} />   
            <Route component={RedirectToNotFound} />
          </Switch>
          <Footer />
        </div>
      );
    };

    return (
      <BrowserRouter>
        <Switch>
          <Route component={My404Component} path="/notfound" />
          <Route component={DefaultRoutes} />
        </Switch>
      </BrowserRouter>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

See working sandbox: https://codesandbox.io/s/cool-chaplygin-5to6g

Upvotes: 4

Related Questions