Question

大家好我试图使用导航链接制作导航栏，但是我收到错误说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;

Answer 1

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

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

您应该为您的编辑器安装一个eslint插件，该插件会在出现问题的行中突出显示如下的红色错误。

Answer 2

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

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

2 个答案: