javascript - <Helmet> ReactJs 无法在函数下工作导致错误

Question

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

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 Line 81:4: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?

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

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