<Helmet> reactJs not working under function导致错误答案

【问题标题】：<Helmet> reactJs not working under function cause error<Helmet> reactJs not working under function导致错误
【发布时间】：2019-10-13 15:47:41
【问题描述】：

我想用 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>
  );
}

我收到以下错误

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

我是 reactJS 的新手，非常感谢任何答案或建议。谢谢。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

组件应该返回单个元素，所以如果你想返回多个元素而没有实际的封闭元素，你可以使用Fragment：

// 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>
    </>
  );
}

【讨论】：