使用 Navbar 元件實現 React 路由導航

正題

繼續前一篇 React 路由的基本設置 | React 學習筆記的下一步驟，路由配置完了接下來要如何與 Navbar 元件進行結合跳轉呢？

在 React 中要使兩者鏈結跳轉的話，需要使用到 React Router 提供的 Link 元件來創建鏈結。

首先，在 Navbar.js 元件中，將鏈結與 to 屬性指定為相應頁面的路徑。

例如：在主頁的鏈結中，將 to 屬性設置為 /，在 Projects 的鏈結則設置為 /projects，About 的鏈結同理類推。

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <div className="logo">
        <Link to="/">Logo</Link>
      </div>
      <div className="links">
        <Link to="/projects">Projects</Link>
        <Link to="/about">About</Link>
      </div>
    </nav>
  );
}

export default Navbar;

結果展示範例

Q&A

Q：是一定要用 <Link>嗎？不能使用 <a> 嗎？兩個有什麼差異？還有別的方法嗎？

A： React Router 提供的 <Link> 元件與 HTML 中的 <a> 標籤有些類似，但它們的實現方式有所不同。

使用 <a> 標籤創建鏈接會導致頁面刷新，這會使應用程式變得緩慢並且不夠流暢。而 <Link> 元件則會在不刷新整個頁面的情況下更新 URL 和元件內容，這可以提高應用程式的性能並提供更好的用戶體驗。

如果仍然想使用 <a> 標籤來創建鏈接，可以使用 react-router-dom 中的 useHistory Hook。

例如：

import { useHistory } from 'react-router-dom';

function Navbar() {
  const history = useHistory();

  const handleClick = (path) => {
    history.push(path);
  };

  return (
    <nav>
      <div className="logo">
        <a onClick={() => handleClick('/')}>Logo</a>
      </div>
      <div className="links">
        <a onClick={() => handleClick('/projects')}>Projects</a>
        <a onClick={() => handleClick('/about')}>About</a>
      </div>
    </nav>
  );
}

export default Navbar;