如何使用反应路由器制作粘性页脚 - Javascript

在网站上，常常需要添加一个粘性页脚，帮助用户快速导航并让网站更具交互性。在这篇教程中，我们将使用React Router和JavaScript一起制作一个可粘性页脚。

什么是粘性页脚？

粘性页脚是指在页面底部，当用户滚动页面时仍可见的导航栏。通常用于网站的底部导航栏或版权信息。

前置要求

在开始本教程之前，确保已经安装了Node.js、NPM和React Router。运行以下命令进行安装：

npm install -g create-react-app
npx create-react-app my-app
npm install react-router-dom

制作过程

第一步：创建一个React组件

我们首先需要定义一个React组件，这个组件将被用作我们的页脚。创建“ Footer.js ”文件并添加以下代码：

import React from 'react';

function Footer() {
  return (
    <div className='footer'>
      <p>© 2021 My Website</p>
    </div>
  );
}

export default Footer;

这是一个基本的React组件，将在页面底部显示一个版权信息。

第二步：添加CSS样式

添加CSS样式来使空间占用右下角。

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  padding: 10px 0;
}

第三步：将页脚放在React路由器中

接下来，我们需要将页脚组件放入React Router中。在应用程序中添加一个“ App.js ”文件，并进行以下更改：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Footer from './Footer';

function App() {
  return (
    <div className='App'>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/contact' component={Contact} />
      </Switch>
      <Footer />
    </div>
  );
}

export default App;

在这里，我们将页脚组件放在路由器的末尾，这样它将一直保持在页面底部。

第四步：用CSS调整样式

最后，我们需要将网站的内容上移，以确保该页脚不会被覆盖。通过以下CSS代码来调整网站内容：

.App {
  padding-bottom: 80px;
}

我们设置了一个底部填充，保持80px的高度。这确保当用户滚动到页面底部时，页脚将不会被覆盖。

教程到此结束，现在你已经成功地创建了一个具有反应路由器的粘性页脚。