解决React报错Functions are not valid as a React child

// App.js
/**
 * ⛔️ Functions are not valid as a React child.
 * This may happen if you return a Component instead of <Component /> from render.
 *  Or maybe you meant to call this function rather than return it.
 */
const App = () => {
  const getButton = () => {
    return <button>Click</button>;
  };
  // 👇️ returning function not JSX element from render
  return <div>{getButton}</div>;
};
export default App;

const App = () => {
  const getButton = () => {
    return <button>Click</button>;
  };
  // ✅ now returning the actual button
  // added parenthesis () to call the function
  return <div>{getButton()}</div>;
};
export default App;

const App = () => {
  const Button = () => {
    return <button>Click</button>;
  };
  // ✅ Using component as <Button />, not Button
  return (
    <div>
      <Button />
    </div>
  );
};
export default App;

// ⛔️ wrong syntax
<Route path="/about" element={About} />
// ✅ right syntax
<Route path="/about" element={<About />} />