Next.JS单页应用程序？

Question

我正在尝试在NextJS中制作单页应用程序，但是我开始认为这是不可能的。谁能告诉我如何？

我的第一次尝试是使用哈希路由器：

<HashRouter>
                <div>
                    <NavLink to="/">Home</NavLink>
                    &nbsp;&nbsp;
                    <NavLink to="/purchaseComplete">Purchase Complete</NavLink>
                </div>    
                <div>
                    <Route exact path="/" Component={Default} />      
                    <Route path="/purchaseComplete" Component={PurchaseComplete} />
                </div>
            </HashRouter>

但是在浏览器中，我看到“不变式失败：浏览器历史记录需要DOM”

然后我尝试使用StaticRouter：

<StaticRouter location="/" context={staticContext}>
                <div>
                    <NavLink to="/">Home</NavLink>
                    &nbsp;&nbsp;
                    <NavLink to="/purchaseComplete">Purchase Complete</NavLink>
                </div>    
                <div>
                    <Switch>
                        <Route exact path="/" Component={Default} />              
                        <Route path="/purchaseComplete" Component={PurchaseComplete} />
                    </Switch>
                </div>
            </StaticRouter>

这将显示两个链接，但是单击它们时没有任何反应。

在NextJS教程中，他们从一开始就谈论SPA，但随后仅向您展示如何制作具有多个页面的应用程序。

我开始认为无法在NextJS中建立SPA。有人可以确认吗？或者有人可以告诉我如何在Next JS中建立SPA？

Answer 1

我发现了一篇博客文章，回答了这个问题：https://dev.to/toomuchdesign/next-js-react-router-2kl8

事实证明Next.Js旨在用于多页应用程序。

作者介绍了如何使用React Router通过Next.JS制作单页应用程序。但是，他还说Next.JS的作者做出了回应，并表示他们不打算将Next.JS用于这种方式！

我完全同意作者的观点，并且正在我的应用程序中使用他的方法。我希望从NextJS进行服务器端渲染，但也希望它是单页应用程序。