当我在 SPA 应用程序中单击 Nav.link 时,整个页面都会重新呈现,但我只希望 UI 主要部分的内容根据所单击的链接进行更改。在布局中,我有一个标题导航,然后是一行和两列。标题导航的内容永远不会改变,左列是可单击导航链接的静态列表。我唯一想更改的内容是基于所单击的链接更改右列的内容,我不想重新呈现整个应用程序,只想重新呈现列的内容。
App.js
const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <React.StrictMode> <BrowserRouter> <CommonComponent/> </BrowserRouter> </React.StrictMode> );
通用组件
<> <Navbar> <div></div> </Navbar> <Container fluid> <Row> <Col xs={4} sm={4} md={4} lg={3} xl={2}> <Nav.Item href="/a"> <Nav.Link href="a">Comp A</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link href="b">Comp B</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link href="c">Comp C</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link href="d">Comp D</Nav.Link> </Nav.Item> </Col> <Col xs={8} sm={8} md={8} lg={9} xl={10}> <Routes> <Route path="/" element={<Navigate to="a" replace />} /> <Route path="/a" element={<CompA {...props} />} /> <Route path="/b" element={<CompB {...props} />} /> <Route path="/c" element={<Compc {...props} />} /> <Route path="/d" element={<CompD {...props} />} /> </Routes> </Col> </Row> </Container> </>
CompA、CompB 等只是不同的形式,没什么复杂的。但是,单击侧面导航链接会呈现整个应用程序。
为了确保单击单页应用程序 (SPA) 中的链接时只有右列中的内容会发生变化,而无需重新呈现整个应用程序,您需要正确配置组件Nav.Link和路由。您当前的问题似乎源于您设置属性的方式href。以下是解决此问题的步骤:
Nav.Link
href
NavLink
react-router-dom
react-router
Route
to``NavLink
以下是更新后的代码:
这一点依然如故。
更新组件如下:
import { BrowserRouter, Routes, Route, Navigate, NavLink } from 'react-router-dom'; import { Navbar, Container, Row, Col, Nav } from 'react-bootstrap'; import CompA from './CompA'; import CompB from './CompB'; import CompC from './CompC'; import CompD from './CompD'; const CommonComponent = (props) => ( <> <Navbar> <div></div> </Navbar> <Container fluid> <Row> <Col xs={4} sm={4} md={4} lg={3} xl={2}> <Nav className="flex-column"> <Nav.Item> <NavLink to="/a" className="nav-link">Comp A</NavLink> </Nav.Item> <Nav.Item> <NavLink to="/b" className="nav-link">Comp B</NavLink> </Nav.Item> <Nav.Item> <NavLink to="/c" className="nav-link">Comp C</NavLink> </Nav.Item> <Nav.Item> <NavLink to="/d" className="nav-link">Comp D</NavLink> </Nav.Item> </Nav> </Col> <Col xs={8} sm={8} md={8} lg={9} xl={10}> <Routes> <Route path="/" element={<Navigate to="/a" replace />} /> <Route path="/a" element={<CompA {...props} />} /> <Route path="/b" element={<CompB {...props} />} /> <Route path="/c" element={<CompC {...props} />} /> <Route path="/d" element={<CompD {...props} />} /> </Routes> </Col> </Row> </Container> </> ); export default CommonComponent;
Routes
要对活动链接应用不同的样式,您可以添加一些 CSS:
.nav-link.active { font-weight: bold; color: #000; }
此 CSS 使活动链接变为粗体并改变其颜色。您可以根据应用程序的需要对其进行自定义。
按照以下步骤,单击导航链接只会更新右侧列的内容,应用程序的其余部分将保持不变。