问题描述：

添加图标到头部导航条 我不明白如何在我的导航条最左边添加图标，这是一个自定义类的NavBar.js。我想在这个栏的最左边添加一个图标。我已经添加了按钮与链接，他们是在中心的导航巴里希望图标.png是出现在最左边的导航条Kindly帮助！!

      import React, { Component } from 'react'
      import { Link, withRouter } from 'react-router-dom'

      class Navbar extends Component {
          logOut (e) {
              e.preventDefault()
              localStorage.removeItem('usertoken')              this.props.history.push(`/`)
          }

          render () {              const loginRegLink = (                  <ul className="navbar-nav">
                      <li className="nav-item">
                          <Link to="/login" className="nav-link">
                              Login                          </Link>
                      </li>
                      <li className="nav-item">
                          <Link to="/my" className="nav-link">
                              my                          </Link>
                      </li>
                      <li className="nav-item">
                          <Link to="/register" className="nav-link">
                              Register                          </Link>
                      </li>
                  </ul>
              )              const userLink = (                  <ul className="navbar-nav">
                      <li className="nav-item">
                          <Link to="/profile" className="nav-link">
                              User                          </Link>
                      </li>
                      <li className="nav-item">
                          <a href="#" onClick={this.logOut.bind(this)} className="nav-link">
                              Logout                          </a>
                      </li>
                  </ul>
              )              return (                  <nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
                      <button className="navbar-toggler"
                          type="button"
                          data-toggle="collapse"
                          data-target="#navbar1"
                          aria-controls="navbar1"
                          aria-expanded="false"
                          aria-label="Toggle navigation">
                          <span className="navbar-toggler-icon"></span>
                      </button>

                      <div className="collapse navbar-collapse justify-content-md-center"
                          id="navbar1">
                          <ul className="navbar-nav">
                              <li className="nav-item">
                                  <Link to="/" className="nav-link">
                                      Home                                  </Link>
                              </li>
                          </ul>
                          {localStorage.usertoken ? userLink : loginRegLink}                      </div>
                  </nav>
              )
          }
      }      export default withRouter(Navbar)  ```

解决方案：

App.js

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";

class Navbar extends Component {
  logOut(e) {
    e.preventDefault();
    localStorage.removeItem("usertoken");
    this.props.history.push(`/`);
  }

  render() {
    const loginRegLink = (      <ul className="navbar-nav">
        <li className="nav-item">
          <Link to="/login" className="nav-link">
            Login          </Link>
        </li>
        <li className="nav-item">
          <Link to="/profile" className="nav-link">
            Profile          </Link>
        </li>
        <li className="nav-item">
          <Link to="/register" className="nav-link">
            Register          </Link>
        </li>
      </ul>
    );

    const userLink = (      <ul className="navbar-nav">
        <li className="nav-item">
          <Link to="/profile" className="nav-link">
            User          </Link>
        </li>
        <li className="nav-item">
          <Link onClick={this.logOut.bind(this)} className="nav-link">
            Logout          </Link>
        </li>
        {/* Dropdown */}        <li className="nav-item dropdown">
          <Link
            className="nav-link dropdown-toggle"
            id="navbardrop"
            data-toggle="dropdown"
          >
            Dropdown link          </Link>
          <div className="dropdown-menu">
            <Link className="dropdown-item" href="#">
              Link 1            </Link>
            <Link className="dropdown-item" href="#">
              Link 2            </Link>
            <Link className="dropdown-item" href="#">
              Link 3            </Link>
          </div>
        </li>
      </ul>
    );

    return (      <nav className="navbar navbar-expand-md bg-dark navbar-dark">
        <Link className="navbar-brand">
          <img
            src="https://via.placeholder.com/50"
            alt="Logo"
            className="img-thumbnail"
          />
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#collapsibleNavbar"
        >
          <span className="navbar-toggler-icon" />
        </button>

        <div
          className="collapse navbar-collapse justify-content-md-center"
          id="collapsibleNavbar"
        >
          {localStorage.usertoken ? userLink : loginRegLink}        </div>
      </nav>
    );
  }
}

export default withRouter(Navbar);

索引.js

import React from "react";import { render } from "react-dom";import { BrowserRouter as Router, Route } from "react-router-dom";import Nav from "./App";const App = props => (  <Router>
    <div>
      <Nav />
      <Route exact path="/" />
    </div>
  </Router>);

render(<App />, document.getElementById("root"));

你好，请检查 链接 在最左边添加图标。

未经允许不得转载：编程自学网 » 添加图标到头部导航条（我没有得到如何添加图标在我的导航条的最左边）