ReactJS引入Nav组件后出现JSX解析错误求助

Hey there! Let's get that error sorted out—it's a common JSX tag mismatch issue combined with a tiny component name mistake.

What's Causing the Error? #

Your error "Parsing error: Expected corresponding JSX closing tag for <Nav.item>" comes from two key issues:

1. Incorrect Component Name: React Bootstrap's navigation item component is <Nav.Item> (note the uppercase I), not <Nav.item>. JSX treats lowercase-starting tags as native HTML elements, but this is a React component so it needs the capitalized name.
2. Tag Mismatch: You tried to close <Nav.item> with </Nav>, which is totally wrong—you need to close <Nav.Item> with </Nav.Item>, and also make sure the outer <Nav> tag has its own proper closing </Nav>.

Corrected Code #

Here's your fixed App.js with the proper Nav component setup:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Nav } from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      {/* Fixed Nav component structure */}
      <Nav fill variant="tabs" defaultActiveKey="/home">
        <Nav.Item> {/* Corrected to uppercase I */}
          <Nav.Link href="/home">Active</Nav.Link>
        </Nav.Item> {/* Matching closing tag for Nav.Item */}
      </Nav> {/* Closing tag for the outer Nav component */}
      
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Quick Notes to Remember #

• Always double-check React Bootstrap component naming conventions—React components use PascalCase (like <Nav.Item>) to distinguish them from native HTML elements.
• JSX is strict about tag matching: every opening tag needs a corresponding closing tag (or use self-closing syntax for components without children, like <img />).

内容的提问来源于stack exchange，提问作者Jonathan Niess