我把react-router升級到了v6，現在當我把smooth添加到HashLink時，它甚至不滾動了。

"react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    "react-router-hash-link": "^2.4.3",

因此，我試圖改變一個簡單的a href，并添加滾動行為:平滑的css，但它也不工作。

<div className="navbar__center">
                <nav>
                    <HashLink smooth to="/#home">
                        Home
                    </HashLink>
                    <HashLink smooth to="/#about">
                        About
                    </HashLink>
                    <HashLink smooth to="/#works">
                        Works
                    </HashLink>
                </nav>
            </div>

在同一頁上，我看到了這個:

<section className="home__section home__2" id="about">

我可以在url中看到哈希錨標簽，如果在新標簽中打開它，它會導航到該標簽，但僅此而已。

路線:

<BrowserRouter>
        <main className="main">
          <Routes>

            <Route path="/" element={<Home />}>
            </Route>

            <Route path="*" element = {<FourOhFour/>} />
          
          </Routes>
        </main>
      </BrowserRouter>

您只是傳遞了正確的名稱。您還需要傳遞平滑道具的值。因為它采用布爾值，所以可以傳遞true或false。

對于您的情況:

<div className="navbar__center">
          <nav>
              <HashLink smooth={true} to="/#home">
                  Home
              </HashLink>
              <HashLink smooth={true} to="/#about">
                  About
              </HashLink>
              <HashLink smooth={true} to="/#works">
                  Works
              </HashLink>
          </nav>
</div>

在React路由器版本6中，定義路由和鏈接路由的語法發生了變化。以下是修改代碼以使用React Router v6的方法:

從react-router-dom導入必要的組件:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

使用& lt路線& gt組件:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="*" element={<FourOhFour />} />
  </Routes>
</BrowserRouter>

更新導航鏈接以使用& ltLink & gt組件而不是HashLink:

<div className="navbar__center">
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/works">Works</Link>
  </nav>
</div>

確保更新鏈接中的路徑(to = & quot/關于& quot而且to = & quot/works & quot；)來匹配您想要導航到的相應路徑。

注意:在React路由器v6中,& ltHashLink & gt不再需要您在react-router-hash-link庫中使用的組件。標準& ltLink & gtreact-router-dom的組件可以平滑地滾動到同一頁面的各個部分。

此外，確保為平滑滾動行為定義了適當的CSS樣式。您可以使用以下CSS代碼來實現平滑滾動:

html {
  scroll-behavior: smooth;
}

通過遵循這些步驟，您應該能夠使用React Router v6導航到頁面中的特定部分。