Navbar not rendering | requiring navbar on only one page, not globally

Question

I have a navbar that I only want to render on my SignUp page. However, currently, this navbar is not rendering at all on my sign up page, despite attempting to render it via <TopNav />

I do not want it globally, so am not including in my App.js.

How can I get this navbar to render on only my signup page?

Top Nav

import Logo from '../Logo.svg'
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";


export default class TopNav extends Component {
    render () {
        return  (
 
        <nav className="navbar navbar-expand-lg navbar-light fixed-top">
          <div className="container">
          <Link to = '/'> 
    <div>
      <img src ={Logo} alt='Logo' className='Logo'/>
    </div>
  </Link>          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul className="navbar-nav ml-auto">
                <li className="nav-item">
                  <Link className="nav-link" to={"/sign-in"}>Login</Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        );
    }};

SignUp page

import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import TopNav from "./TopNav"

export default class SignUp extends Component {
    render() {
        return (
          
          <div>
            
<TopNav />
          </div>,
                <div className="auth-wrapper">
                <div className="auth-inner">
            <form>
              
            <h4>Sign Up</h4>
            <p>
              Lorem Ipsum is simply dummy text.
            </p>
            <div className="form-group">
              <label>First name</label>
              <input type="text" className="form-control" placeholder="First name" />
            </div>
</form>
          </div>
          </div>
        );
    }
}

Here is also my current app.js for reference

function App() {
  return (

    <div className="App">
          <Routes>
            <Route path='/' element={<AppLayout />}/>
                    <Route index element={<Home />} />           
                     <Route path="/sign-in" element={<Login />} />
            <Route path="/sign-up" element={<SignUp />} />
          </Routes>

</div>
  );
}

Update

import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import TopNav from "./TopNav"

export default class SignUp extends Component {
  render() {
      return (
        
        <div style={{ display: "flex" }}>
          
<TopNav />
<div className="auth-wrapper">
              <div className="auth-inner">
        </div>
            
          <form>
            
          <h4>Sign Up</h4>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
          </p>
          <div className="form-group">
            <label>First name</label>
            <input type="text" className="form-control" placeholder="First name" />
          </div>
          <div className="form-group">
            <label>Last name</label>
            <input type="text" className="form-control" placeholder="Last name" />
          </div>
          <div className="form-group">
            <label>Email address</label>
            <input type="email" className="form-control" placeholder="Enter email" />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input type="password" className="form-control" placeholder="Enter password" />
          </div>
          <p classname="forgot-password text-right">
            Already registered <a href="/sign-in">log in?</a>
          </p>
          <button type="submit" className="button">Sign Up</button>
        
        </form>
        </div>
        </div>
      );
  }
}

Unless there is code that isn't shown above the `TopNav` class, it looks like you're missing `import React, { Component } from "react";` — HudsonGraeme, Feb 20 '22 at 01:19
@HudsonGraeme Yeah, I have that in the TopNav. Code was just missing — KirkCode, Feb 20 '22 at 01:21

score 0 · Answer 1 · answered Feb 20 '22 at 01:32

There is a comma in the render function of the signUp component that causes two components to be returned from the signUp page. The last component is rendered and the first is ignored. The code should be as follows:

import React, { Component } from "react";
import TopNav from "./TopNav";

export default class SignUp extends Component {
  render() {
    return (
      <> {/*Use react fragment to wrap the nav and auth sections*/}
        <div>
          <TopNav />
        </div> {/*Remove the `,`*/}
        <div className="auth-wrapper">
          <div className="auth-inner">
            <form>
              <h4>Sign Up</h4>
              <p>Lorem Ipsum is simply dummy text.</p>
              <div className="form-group">
                <label>First name</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="First name"
                />
              </div>
            </form>
          </div>
        </div>
      </>
    );
  }
}

See this related answer: https://stackoverflow.com/a/34893582/10538100

Did not seem to work? removing comma did nothing. See edit with code. Am I overlooking something? I feel like I must be — KirkCode, Feb 20 '22 at 01:44
Hmm I placed your updated code in the codesandbox and it works perfectly without the comma. Please have a look at this [App.js](https://codesandbox.io/s/topnav-dhzgwx?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js) and see if the changes made there might help as well. — HudsonGraeme, Feb 20 '22 at 03:48

Navbar not rendering | requiring navbar on only one page, not globally

1 Answers1