components 在使用 props 時忘了帶大括號

錯誤訊息
Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

可能原因

• component 在使用 props 時參數忘了帶大括號：

// TodoItem 這個 function 的參數忘了帶大括號
    const TodoItem = (text, onClick) => {
      return <li onClick={onClick}>{text}</li>;
    };

ReactDOM.render錯誤

錯誤訊息
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:......

可能原因

• 由於React 18不再支援ReactDOM.render

// 註解掉的是之前ReactDOM.render的code 
    import React from 'react'
    //import ReactDOM from 'react-dom'
    import { createRoot } from 'react-dom/client'
    const title = React.createElement('h2',null,'hhh')
    //ReactDOM.render(title, document.getElementById('root'))
    //下面代替上面一行
    const root = createRoot(document.getElementById('root'))
    root.render(title)

使用 router.push 代替 Link

此問題本身與React關係不大，能說錯誤也能說這是使用情境的問題

function ClickButton(props) {
  const [count, setCount] = useState(0);
  const onClickCount = () => {
    setCount((c) => c + 1);
  };
  const onClickRequest = () => {
    apiCall(count);
  };
  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

上述對於大多數使用者上基本沒有問題，但這邊主軸的問題點在於可訪問性，因為當按鈕點下去會進行直接跳轉，此處將不會進行標記為鏈結來接到另一個頁面，也導致瀏覽器無法識別到該頁面，藉此發生無法分享該鏈結或者是另開新視窗。

解決方案如下：
盡量使用組件或常見的標籤來進行導向即可

function ClickButton(props) {
  return (
    <Link to="/next-page">
      <span>Go to next page</span>
    </Link>
  );
}