主页中的React Router目标div id

Question

我正在使用react路由器，特别是HashRouter，因为我试图在github页面上托管我的react应用程序。在使用HashRouter之前，我只是使用BrowserRouter，并且我能够在默认(Home(路由上针对特定的div(即<Route exact path="/" component={Home} />)，其id如下…

<li className="nav-item">
<a
className="nav-link text-white font-weight-bold"
href="/#about"
data-target="#about"
>
About
</a>
</li>

上面的操作正如我所希望的那样，只需将主页向下滚动到id为#About的"关于"部分。然而，现在我正在使用HashRouter，无法实现相同的期望行为。现在，当我点击链接时，它只会转到主页组件，但不会像以前那样滚动到关于部分。有简单的解决方案吗？我已经包含了以下相关代码部分的片段。。。

<HashRouter basename="/">
<Switch>
<Route exact path="/" component={Home} />
<ContextProvider>
<Route
path="/terms-and-conditions"
component={TermsAndConditions}
/>
<Route path="/contact" component={Contact} />
<Switch>
<HashRouter>
<li className="nav-item">
<Link
className="nav-link text-white font-weight-bold"
to={{ pathname: "/", hash: "#about" }}
data-target="#about"
>
About
</Link>

Answer 1

试试这个包React Router Hash Link。有关软件包的更多信息，请访问[areact router hash link]1，但以下步骤应该足够了。

1. 对您的项目运行npm i react-router-hash-link
2. 更换<Link className="nav-link text-white font-weight-bold" to={{ pathname: "/", hash: "#about" }} data-target="#about"> About</Link>
3. 带<HashLink to="/#about">About</HashLink>