React编译时出现相邻JSX错误求助附相关代码片段

Hey there! Let's dig into that Adjacent JSX elements error you're facing in your React project. I’ve run into this exact issue dozens of times, so let’s break it down and fix it quickly.

What’s causing the error? #

React’s JSX rules are pretty strict here: when you return JSX from a component, it must be wrapped in a single top-level element. If you have multiple sibling elements sitting at the same level (no parent container around them), React throws this error because it doesn’t know how to render them as a single unit.

Looking at your code snippet, even though it cuts off, the most likely culprits are:

• You have multiple top-level elements directly inside your return() statement (like <Router> plus another <div> or component, with no wrapper around both)
• Or, inside your <Router>, you’ve got multiple sibling elements that aren’t wrapped in a container (though Router itself acts as a container, so this is less common unless you’ve got a messy structure)

How to fix it #

You’ve got a few clean options to resolve this:

1. Wrap everything in a plain <div> (quick and simple)

If you don’t mind adding an extra DOM node, just wrap all your top-level return elements in a <div>:

return (
  <div>
    <Router>
      <div className="banner">
        <div>
          <ul>
            <li><Link className="a" to={'/'}>•Home</Link></li>
            <li><Link className="a" to={'/about'}>•About</Link></li>
            <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
            <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
            <li><Link className="a" to={'/services'}>•Services</Link></li>
            {/* Add your remaining list items here */}
          </ul>
        </div>
      </div>
      {/* If you have other elements inside Router, keep them here */}
    </Router>
    {/* Any other top-level components/elements go inside the outer div */}
  </div>
);

2. Use a React Fragment (no extra DOM nodes, recommended)

If you want to avoid cluttering the DOM with unnecessary <div>s, use React’s <Fragment> component (or its shorthand <>...</>):

// No need to import Fragment if you use the shorthand, but if you prefer the full syntax:
// import { Fragment } from 'react';

return (
  <>
    <Router>
      <div className="banner">
        <div>
          <ul>
            <li><Link className="a" to={'/'}>•Home</Link></li>
            <li><Link className="a" to={'/about'}>•About</Link></li>
            <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
            <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
            <li><Link className="a" to={'/services'}>•Services</Link></li>
            {/* Add your remaining list items here */}
          </ul>
        </div>
      </div>
    </Router>
    {/* Any other top-level elements go inside the Fragment */}
  </>
);

3. Clean up the Router’s internal structure

If the error is actually inside your <Router> (e.g., you have two sibling <div>s without a wrapper), just wrap those inner elements in a Fragment or div:

return (
  <Router>
    <>
      <div className="banner">...</div>
      <div className="main-content">...</div>
    </>
  </Router>
);

Quick side note #

I spotted a tiny syntax quirk in your code: <Link className="a"to={'/services'}> is missing a space between className="a" and to. It won’t cause this error, but it might trigger a linter warning—fix it to <Link className="a" to={'/services'}> for cleanliness.

That should get your code compiling again! Let me know if you hit any snags.

内容的提问来源于stack exchange，提问作者Lex V