我有一个网站导航栏，我正在建设。导航栏中的链接到一个部分（#id）在页面中，但不去该部分，只更新网址。如果我在地址栏中输入网址，它工作正常，但当使用链接没有React。
只有当我强制页面重新呈现时，它才起作用，但重新呈现后页面冻结，我在控制台中得到一个错误：我添加了一个onClick，还尝试使用setState强制重新呈现。
Index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);App.js
function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/home" element={<Home />} />
</Routes>
</div>
);
}
export default App;Home.jsx
function Home() {
return (
<div>
<Container fluid>
<NavBar />
<HomeContent />
</Container>
<Pricing />
<Footer />
</div>
);
}
export default Home;NavBar.jsx
function handleClick() {
this.setState({ state: this.state });
// this.forceUpdate();
}
function NavBar() {
return (
<>
<Navbar variant="dark" expand="lg">
<Container>
<Navbar.Brand onClick={handleClick} as={Link} to="/home">
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link onClick={handleClick} as={Link} to="/home">
Home
</Nav.Link>
<Nav.Link onClick={handleClick} as={Link} to="/home#pricing">
Pricing
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
export default NavBar;Pricing.jsx
function Pricing() {
return (
<section id="pricing">
<h2 className="section-heading">This is the pricing section</h2>
</section>
);
}
export default Pricing;我还尝试在NavBar组件上使用withRouter
我读到，如果我不得不诉诸强制页面呈现，那么我可能做错了什么，但我是新的React，我一直在寻找更好的方法来做到这一点，但仍然找不到一个更好的方法来做到这一点。
2条答案
按热度按时间rfbsl7qr1#
this.setState和this.forceUpdate是较老的仅基于类的React组件方法。它们在React函数组件中不起作用。react-router-dom单独无法处理哈希链接，即导航到特定路由路径***，然后***滚动到特定哈希锚点。当前react-router-hash-link仍可与react-router-dom@6配合使用。从react-router-hash-link导入HashLink，并使用，而不是使用RRD中的Link组件。示例：
8zzbczxx2#
解决您的问题的最好方法是在您的Web应用程序中创建React路由器结构。我建议您通过React路由器beginners page。
此外，在您的情况下，我建议创建React路由器结构，如以下结构：
您将获得主index.js文件：
您将没有app.js文件，只有一个布局.jsx文件：
而且你只需要在indexjs中添加路径和更多的子元素，只需要创建一些组件并将它们作为主页添加到子数组中。
在你的导航组件中，你必须有链接到你的页面，就像下面的导航组件例子：
我希望你能解决你的问题。