next.js 简单路由菜单答案

【问题标题】：next.js simple routing menunext.js 简单路由菜单
【发布时间】：2019-11-26 07:17:56
【问题描述】：

我如何创建一个简单的路由菜单，它不会离开链接选择菜单 - 非常类似于 React 中 BrowserRouter 的默认操作？

我正在阅读 Next.js 中的路由，但简单的示例并没有立即显现出来。 guide on links 仅涵盖使用所选链接完全更换活动组件。我想在视图中添加一个组件，而不是替换屏幕上的所有内容。

这在 vanilla React 中工作，我需要 Next.js 中的等效功能，即简单链接菜单以将组件加载到视图中。

        import { BrowserRouter as Router, Route, Link } from "react- router-dom";

    export function MyNavbar() {
    return (
      <Nav>
      <Link to="/" activeClassName="active">
      <NavItem>Home</NavItem>
      </Link>
      <Link to="/about" activeClassName="active">
      <NavItem>Home</NavItem>
      </Link>
      </Nav>
    );
    }

    export default function Home() {
      return (
        <Router>
        <div>
        <MyNavbar></MyNavbar>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />  
        </div>
        </Router>
      );
    }

这符合我的预期并将组件加载到视图中，并且不会替换整个页面（如 next.js 示例）。

谢谢

【问题讨论】：

我创建了一个页面包装器组件来包含我想从导航栏中选择的任何组件的导航栏和 props.children，这会创建一个合理的 web/app 范围导航栏。但是我不清楚这是“反应”方式还是最好的方式。
你为什么要这样做？您需要前端路由的具体用例是什么？如果你想拥有一个home和一个侧面有导航面板的about页面，你绝对可以使用next.js路由系统来实现。

标签： javascript reactjs react-router next.js

【解决方案1】：

NextJS有一个基于pages概念的路由机制，使用文件夹调用pages作为路由的根，使用子文件夹自动生成嵌套路由。将文件添加到 pages 文件夹时，会自动生成带有该文件名称的路由（您只需将该文件的 export default 设为该文件，奇迹就会发生）。使用 pages 目录作为参考，只需添加该目录中的文件和子目录，在下面的示例中，pages 文件夹中的 index.js 将导致主路由调用此文件。

给定包含 index.js 文件的 pages 文件夹，它将是根路径：pages/index.js 路由到/

子文件夹将是嵌套在页面中的路径：pages / blog / index.js 路由到 /blog

【讨论】：

【解决方案2】：

经过进一步研究，我上面的评论是推荐的 Next.js 方式...

"...页面包装组件包含我想从导航栏中选择的任何组件的导航栏和 props.children，这会创建一个合理的 web/app 范围导航栏"

【讨论】：