反应原生导航栏 - Javascript

当你开发一个网站或应用程序时，导航栏是最重要的组件之一。它可以帮助用户轻松导航到网站的不同部分，也可以增强用户体验。在本篇文章中，我们将介绍如何使用React编写一个简单的原生导航栏。

技术栈

我们将使用以下技术：

• React
• JSX
• CSS

所需组件

我们将使用这些React组件来构建我们的导航栏：

• <NavLink> - 用于渲染导航链接
• <Router> - 用于处理导航链接的路由
• <Switch> - 用于选择一条匹配的路由
• <Route> - 用于匹配一个具体的路由

步骤

1. 安装必要的依赖

我们需要安装以下依赖：

npm install react react-dom react-router-dom

2. 创建导航栏组件

我们将创建一个名为NavBar的组件，并在其中使用NavLink来渲染导航链接。同时，我们将使用Router、Switch和Route来处理链接的路由。

import React from 'react';
import { NavLink, Router, Switch, Route } from 'react-router-dom';

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink exact activeClassName="active" to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName="active" to="/about">
            About
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName="active" to="/services">
            Services
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName="active" to="/contact">
            Contact
          </NavLink>
        </li>
      </ul>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/services" component={Services} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Router>
    </nav>
  );
};

export default NavBar;

3. 创建路由组件

我们还需要创建四个路由组件，包括Home、About、Services和Contact。这些组件可以是类组件或函数组件，部分代码如下：

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

const Services = () => {
  return (
    <div>
      <h1>Services</h1>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <h1>Contact</h1>
    </div>
  );
};

4. 渲染导航栏组件

最后，我们需要将导航栏组件添加到我们的应用程序中。假设我们使用App组件作为我们的主组件，我们只需要简单地调用NavBar组件即可。

import React from 'react';
import NavBar from './NavBar';

const App = () => {
  return (
    <div>
      <NavBar />
    </div>
  );
};

export default App;

总结

使用React编写一个原生导航栏非常简单。在本篇文章中，我们展示了如何使用React、JSX和CSS创建一个简单的导航栏。我们使用了React Router来处理导航链接的路由，并演示了如何创建路由组件。像许多其他React组件一样，导航栏组件可以很容易地重复使用。