时间戳

首页 > 解决方案 > next.js 简单路由菜单

javascript - next.js 简单路由菜单

问题描述

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

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

这在 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 示例）。

谢谢

标签： javascriptreactjsreact-routernext.js

解决方案

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

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

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

推荐阅读