[英]Sticky footer for react with react-router-dom
對於我一直遇到的問題,我需要一個非常干凈,簡單的解決方案,並且我也可以繼續在其他項目中使用它。 我需要一個與react-router-dom一起使用的粘性頁腳。 我似乎無法讓它工作。 我的App.js看起來像這樣:
<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>
你會如何讓頁腳變粘? 謝謝!
我遇到了一個更好的解決方案,使用flex-box在react-router-dom周圍使用粘性頁腳。
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;
}
我希望這將有助於將來的某些人。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.