Javascript <；头盔>；reactJs未在函数下工作导致错误

我想用ReactJs建立一个网站，但是，我很难输入ReactJs。这是密码

App.js

import React from 'react';
import ReactDOM from 'react-dom'
import { Helmet } from "react-helmet";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

export default function App() {
  return (
    <div className="App">
        <Router>
            <Link to="/">Home</Link>
            <Link to="/post/">Post</Link>
            <Switch>
                <Route path="/post/">
                    <Post/>
                </Route>
                <Route path="/">
                    <Home/>
                </Route>
            </Switch>
        </Router>
    </div>
  );
}

function Home() {
  return(
    <Helmet>
      <title>Main Title</title>
    </Helmet>
    <h1>Home</h1>
  );
}

function Post() {
  return(
    <Helmet>
      <title>Post Title</title>
    </Helmet> 
    <h1>Post</h1>
  );
}

从“React”导入React；
从“react dom”导入react dom
从“react Helmet”导入{Helmet}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
进口{
BrowserRouter作为路由器，
转换
路线
链接
用户路由匹配，
useParams
}从“反应路由器dom”；
从“/logo.svg”导入徽标；
导入“/App.css”；
导入'bootstrap/dist/css/bootstrap.css'；
导出默认函数App（）{
返回(
家
邮递
);
}
函数Home（）{
返回(
主标题
家
);
}
职能职位（）{
返回(
职称
邮递
);
}

我收到以下错误

./src/App.js第81:4行：解析错误：相邻的JSX元素必须 被包装在一个封闭的标签中。你想要一个JSX片段吗

---

我是reactJS的新手，非常感谢您的回答和建议。谢谢。

组件应该返回单个元素，因此如果要返回多个元素而不包含实际的封闭元素，可以使用：

//React.Fragment
函数Home（）{
返回(
主标题
家
);
}
//速记
职能职位（）{
返回(
职称
邮递
);
}

// React.Fragment
function Home() {
  return(
    <React.Fragment>
      <Helmet>
        <title>Main Title</title>
      </Helmet>
      <h1>Home</h1>
    <React.Fragment>
  );
}

// shorthand
function Post() {
  return(
    <>
      <Helmet>
        <title>Post Title</title>
      </Helmet> 
      <h1>Post</h1>
    </>
  );
}