CODEWITHSUNDEEP
reactjsroutesbackgroundnavbar
Matt Strom
Matt Strom

Reputation: 720

How to decouple the Router and Navbar so the Navbar component is not including components

I am creating a portfolio website, where in this design, I have a background for the entire website that will stay fixed as content scrolls over it. The Navbar is also fixed, and has the content scrolling under it.

This design looks cool, and wasn't too hard to put together, but I am having a little bit of trouble incorporating React Routing into this mix.

From what I gathered, the tutorials say to create a App-Router component, which basically looks like their way of saying "Navbar". So I did that and got my Navbar to route to my Home, and About Me component pages. However, since my Navbar is fixed, all the pages refuse to scroll, which means they are being included inside the Navbar component. This is the opposite of what I want to have happen.

My Ideal setup would be to have the Navigation Bar (It's own component) send a routing request to a Routing component, which will then render that component (bellow the Navbar, still contained within the app container which contains the background).

Here is some psuedo code of my structure so far (the bad code):

App.js

    <div className="App">
        <Navigation />
        {/* <other components to render here /> */}
    </div>

App.css

     background-image: url(blah);
     background-attachment: fixed;
     z-index: -1;

Navigation.js

    <Router>
        <div className="App-navigation">
            <Container>
                <Row>
                    <Link to="/">Home</Link>
                    <Link to="/About">About Me</Link>
                </Row>
            </Container>

            <Route path="/" exact component={Home} />
            <Route path="/About" component={About} />
        </div>
    </Router>

Navigation.css

    .App-navigation {
        // blah blah
        position: fixed;
        z-index: 10;
    }

About.js and Home.js just having their respective page content.

With the above, even though Home has more content than the page height, obviously the containing navbar's fixed position prevents scrolling.

I'm pretty new to React, so I'm not sure on the proper procedure in setting up a app routing component, or where it's supposed to fit into the app architecture. Any help or guidance is appreciated!

Upvotes: 0

Views: 1842

Answers (2)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

You simply need to restructure things a bit to ensure that routes/views/components render outside of component Navigation. Move Router to wrap most if not all children of App. Remove the Route elements from Navigation as Route is where the contents of each route/view/component will render. Move the removed Route elements to some other component outside of Navigation and inside Router.

App:

<div className="App">
  <Router>
    <Navigation />
    <Main /> {/* component for rendered components */}
  </Router>
</div>

Navigation:

<div className="App-navigation">
  <Container>
    <Row>
      <Link to="/">Home</Link>
      <Link to="/About">About Me</Link>
    </Row>
  </Container>
</div>

Main:

<div className="App-main">
  <Container>
    <Route path="/" exact component={Home} />
    <Route path="/About" component={About} />
  </Container>
</div>

Here is an example in action.

Hopefully that helps!

Upvotes: 1

Aleks
Aleks

Reputation: 984

Two quick solutions.

1# Create only 2 components in your Router: app/portfolio and PageNot Found. Lazy load components that you wouldn't want to load immediately. Like About component. The only downside is that url wouldn't change, if you after it.

2# Just import Navbar component in every other page/component or use HOC pattern which basically will grant the same result.

Upvotes: 0

Related Questions