javascript React JS：使用react-router-dom时，单页应用程序缺少页面

xzlaal3s 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(132)

我的SPA有多个页面，我希望能够从第一页连续滚动到最后一页，但使用X1 M0 N1 X时，当我单击一个链接时，它只显示一个页面，删除其他页面-路由工作正常，但其他页面消失了，除了一个与活动链接。我错过了什么？我读了一些关于SPA的教程，一切似乎都很好。我我使用的是react-router-dom v.6.9。这是我的代码：
导航：

<Nav className="justify-content-evenly align-items-center flex-grow-1 nav-tab">
  <Link exact to="/">Home</Link>
  <Link exact to="/aboutus">About Us</Link>
  <Link exact to="/services">Services</Link>
  <Link exact to="/offers">Packages</Link>
  <Link exact to="/contact">Contact Us</Link>
</Nav>

这是在App.js中：

<Router>
  <Navigation />
  <Routes>
    <Route index element={<Home />} />
    <Route path="/aboutus" element={<AboutUs />} />
    <Route path="/offers" element={<Offers />} />
    <Route path="/services" element={<Services />} />
    <Route path="/contact" element={<ContactUs />} />
  </Routes>
  <Footer />
</Router>

JavaScript

来源：https://stackoverflow.com/questions/75736465/react-js-single-page-application-has-missing-pages-when-using-react-router-dom

1条答案

按热度按时间

fd3cxomn1#

这是使用react-router时的设计和预期行为，即使整个React应用程序实际上仍然是一个SPA，您也在模拟一个多页面应用程序。换句话说，RRD在地址栏客户端操作URL，并专门呈现路由的内容。
如果你希望你的所有内容仍然是一个“单页应用”，那么不要使用react-router，把所有内容呈现到一个节点元素中，并使用原始的锚标签链接到特定的部分，即通过id哈希。

<Nav className="justify-content-evenly align-items-center flex-grow-1 nav-tab">
  <a to="/#home">Home</a>
  <a to="/#aboutus">About Us</a>
  <a to="/#services">Services</a>
  <a to="/#offers">Packages</a>
  <a to="/#contact">Contact Us</a>
</Nav>

<Navigation />
<Home />
<AboutUs />
....
<ContactUs />

其中，每个内容组件都被分配了一个要链接到的id属性。

const Home = () => (
  <div id="home">
    ....
  </div>
);

如果你的目的是将特定“页面”上的一些内容呈现为“多页面”应用程序，并且你仍然希望导航和滚动到特定的页面和部分，那么你可以使用类似react-router-hash-link的东西，它与react-router@6具有基本的兼容性。
例如，如果“服务”、“优惠”和“联系我们”部分都在“关于”页面上，您可以执行类似以下操作：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
这两种方法中的任何一种都应该提供良好的总体工作方向。

赞(0）回复(0）举报 2023-03-16

我来回答

javascript React JS：使用react-router-dom时，单页应用程序缺少页面

1条答案

相关问题

热门标签

最新问答