How to organize scrolling components on a page in React?
I am trying to create a single page scrolling page where all the content is on one page and from the top to the top is a navigation bar that can guide you to different sections of the page.
Basically, I'm trying to make this same site, but in response: http://codepen.io/drhectapus/pen/bBpYoZ
The problem is I'm not really sure how to organize my components for this one page layout.
This is how I have organized it so far in my index.js file:
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div className='app-container'>
<Nav />
<Switch>
<Route path='/contact' component={Contact} />
<Route path='/work' component={Work} />
<Route path='/about' component={About} />
<Route path='/' component={Home} />
</Switch>
</div>
</BrowserRouter>
</Provider>,
document.querySelector('#app')
);
Any help is greatly appreciated :)
source to share
So, from the comment you gave, I believe you want,
-
One page with multiple scrollable sections.
-
Ability to use browser navigation to bookmark scrolling.
To do this, we first want to specify what the page looks like. Since all elements need to be displayed at once, it should be something like this:
Container = React.createClass({
render: function(){
return <div>
<Home/>
<Contact/>
<Work/>
<About/>
</div>;
}
});
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div className='app-container'>
<Nav />
<Route path='/' component={Container} />
</div>
</BrowserRouter>
</Provider>,
document.querySelector('#app')
);
Then we'll update the router to include multiple paths ... but each one will display the same result;
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div className='app-container'>
<Nav />
<Route path='/contact' component={Container} />
<Route path='/work' component={Container} />
<Route path='/about' component={Container} />
<Route path='/' component={Container} />
</div>
</BrowserRouter>
</Provider>,
document.querySelector('#app')
);
Finally, we set up triggers onEnter
on each route to scroll to the specified html element, by id;
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div className='app-container'>
<Nav />
<Route path='/contact' component={Container}
onEnter={function(){
document.getElementById("contact_id").scrollIntoView();
}
}
/>
<Route path='/work' component={Container}
onEnter={function(){
document.getElementById("work_id").scrollIntoView();
}
}
/>
<Route path='/about' component={Container}
onEnter={function(){
document.getElementById("about_id").scrollIntoView();
}
}
/>
<Route path='/' component={Container}
onEnter={function(){
document.getElementById("home_id").scrollIntoView();
}
}
/>
</div>
</BrowserRouter>
</Provider>,
document.querySelector('#app')
);
Just make sure to match the html elements with the correct ID and you should be set.
source to share