<li> 的预期对应 jsx 结束标记答案

【问题标题】：expected corresponding jsx closing tag for <li><li> 的预期对应 jsx 结束标记
【发布时间】：2018-06-01 22:20:22
【问题描述】：

大家好，我正在尝试使用导航链接创建导航栏，但是我收到一条错误消息，提示 expected coresponding jsx clsoing tag for <li> 我已尝试修复该错误，但我似乎无法理解为什么它不起作用，如果我问了一个愚蠢的问题，我很抱歉只是一个初学者。

import React, { Component } from 'react';
import logo from './logo.svg';

import Weather from "./Weather.js";
import Header from "./Header";
import Nav from "./Nav";
import About from "./About";
import Down from "./Down";
import Contact from "./Contact";
import Map from "./map/Map";
import Footer from "./Footer";
import Home from "./Home";

import Skycons from "react-skycons"
import { geticon } from "./geticon.js"

import ToggleDisplay from 'react-toggle-display';
import Form from "./Form.js";
import Layout from "./layout.js";
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import { FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


          render() {
        return (
          <div>

            <Router>
     <Route exact path='/' component={Home}/>

    <Route exact path="/layout" render={() => <Layout getWeather={this.getWeather} parentState={this.state} />} />

    <div> 

         <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
          <div className="container">

            <a className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

              <i className="fa fa-bars"></i>
            </button>

            <div className="collapse navbar-collapse" id="navbarResponsive">
              <ul className="navbar-nav ml-auto">
                <li className="nav-item">
            <Navlink to="/" className="nav-link js-scroll-trigger" href="#about">Home</Navlink>
                </li>
                <li className="nav-item">
               <Navlink to="/layout" className="nav-link js-scroll-trigger"> Search </Navlink>
                <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#contact">Search</a>
                </li>
              </ul>
            </div>
          </div>
          </Router>
        </nav>


    </div>
    </div>
        );
      }
    };

    export default App;

【问题讨论】：

这是您的实际代码吗？你只有一个没有类的render() { 函数吗？
错误信息对我来说似乎很清楚。

标签： reactjs

【解决方案1】：

<li className="nav-item">
  <Navlink to="/layout" className="nav-link js-scroll-trigger"> Search </Navlink>

您没有此标记的结束 </li>。

您应该为您的编辑器安装一个eslint 插件，它会在问题所在的行上以红色突出显示这样的错误。

【讨论】：

【解决方案2】：

我在您共享的代码中没有看到任何 App 类。
您正在使用Navlink，但您没有在任何地方导入。您必须从包 "react-router-dom" 中导入 NavLink 类。

【讨论】：