CODEWITHSUNDEEP
reactjsreact-router
Dawn17
Dawn17

Reputation: 8297

Home Page overlaps with other page Using React Route

I am using the react-router-dom to define my paths in the web app.

  render() {
    return (
      <BrowserRouter>
        <div style={{background:'floralwhite'}}>
          <Route path='/' component={Home} />
          <Route path='/calendar' component={Calendar} />
          <Route path='/config' component={UserConfig} />
          <Route path='/login' component={Login} />
          <Route path='/help' component={HelpPage} />
        </div>
      </BrowserRouter>
    );
  }

The default page Home looks like this:

  render() {
    return (
      <div className="App">
        {this.state.user ? (
          <div>
            <Navbar />
          </div>) :
          (<Login />)}
      </div>


    )
  };

Since I put the Navbar on the top when the user is logged in, it is always there when I move to another route. However, when I try to add other contents in the Home page, it gets overlapped with other contents when I move to a different path.

In my current Home, I just have the Navbar

enter image description here

When I move to another path

enter image description here

It looks like this. However, when I add another content in Home, 

  render() {
    return (
      <div className="App">
        {this.state.user ? (
          <div>
            <Navbar />
            <h1>
              Some content here
            </h1>
          </div>) :
          (<Login />)}
      </div>


    )
  };

enter image description here

It will look like this. I don't want this to overlap and I want to make the homepage to reflect its own content but still put the navbar up there.

Am I using it wrongly?

Upvotes: 2

Views: 1793

Answers (3)

Nikhil Patil
Nikhil Patil

Reputation: 316

Hey simple just use exact keyword, e.g.:

<Route exact path='/' component={Home} />
  <Route exact path='/calendar' component={Calendar} />

Upvotes: 0

Snukus
Snukus

Reputation: 1302

<Route path='/' component={Home} />

will render the Home component anytime the path has the / so /calendar will trigger it and then render the calendar component. You need to change it too:

<Route exact path='/' component={Home} />

Upvotes: 4

Asaf Aviv
Asaf Aviv

Reputation: 11800

Add exact to your home route

<Route exact path='/' component={Home} />

Upvotes: 2

Related Questions