I need a really clean and simple solution for an issue I always run into, that I can continue using in other projects as well. I need a sticky footer that works with react-router-dom. I can't seem to get it working. My App.js looks like this:
<div>
<Header loaded={loaded} />
<Switch>
<Route
path="/about"
render={props => <About loaded={loaded} {...props} />}
/>
<Route
exact
path="/"
render={props => <MainPage loaded={loaded} {...props} />}
/>
<Redirect to="/" />
</Switch>
<Footer />
</div>
How would you go about making the footer sticky? Thanks!
I ran into a way better solution for working with a sticky footer around react-router-dom using flex-box.
App.js:
<div id="container">
<Header loaded={loaded} />
<div id="main-content">
<Switch>
<Route
path="/about"
render={props => <About loaded={loaded} {...props} />}
/>
<Route
exact
path="/"
render={props => <MainPage loaded={loaded} {...props} />}
/>
<Redirect to="/" />
</Switch>
</div>
<Footer />
</div>
app.css
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main-content {
flex: 1;
}
I hope this will help someone in the future.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.