NextJS：如何参数化函数以根据链接呈现特定内容？答案

【问题标题】：NextJS: How to parameterize function to render specific content based off link?NextJS：如何参数化函数以根据链接呈现特定内容？
【发布时间】：2021-06-17 07:24:32
【问题描述】：

我在 /pages/index.js 中有以下内容：

export default function Home() {
  return (
    <div className={styles.grid_container}>
      <NavBar/> 
      <div className={styles.center_pane}>
        <Overview/>
      </div>
      <div className={styles.right_pane}>
        <h2>Right Pane</h2>
      </div>
      <Footer/>
    </div> 
  )
}

它渲染一切正常，但我需要一些参数化 <Overview/> 元素的方法，以便根据用户从 <Navbar> 导航到的页面，它会渲染相应的组件。

我正在考虑的选项只是为每个链接创建一个页面，但似乎效率很低。

这个问题看起来很相似，但从未得到答案：Nextjs: render content based on sidebar choice

任何帮助将不胜感激，谢谢。

【问题讨论】：

点击侧边栏的行为是什么？改变状态，改变路径？
@dna 它改变了路径，但我不认为它必须是那样。
如果您更改页面，您必须创建另一个页面。您可以使用布局组件优化代码并仅更改每个页面中的子项，否则您可以改用查询参数并根据条件呈现组件。购买 keep It simple 更改页面和更改组件

标签： javascript next.js

【解决方案1】：

您只需要为每个页面创建单独的文件，假设您在菜单上有一个名为“Overview”的项目，您可以创建 pages/overview.js 文件，Next.js 会在您自动识别导航到您要打开概览组件的 youraddress.com/overview。

要重用“围绕”概览组件的逻辑，您需要创建一个布局。

你需要这样的东西：

// components/navbar.js

const Navbar = () => {
  return <div>This is appears everywhere!</div>;
};

export default Navbar;


 // components/Layout.js
    
import Head from "next/head";

import Navbar from "./Navbar";

const Layout = ({ children }) => {
  return (
    <div>
      <Head>
        <title>Your awesome App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar />
      {children}
    </div>
  );
};

export default Layout;
    
    
 // Wrapping your index.js into your layout
import Layout from "../components/Layout";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <Layout>
      <div className={styles.container}>This is the home page</div>
    </Layout>
  );
}

// pages/overview.js (the name of the file is the route, so by creating overview you can access localhost:3000/overview and next.js will redirect

import Layout from "../components/Layout";
import styles from "../styles/Home.module.css";

export default function overview() {
  return (
    <Layout>
      <div className={styles.container}>This is overview page</div>
    </Layout>
  );
}

查看完整源代码https://github.com/and-dutra/minimal-nextjs-layout

【讨论】：

我是前端开发的新手，所以我不知道该怎么做。如果我能弄清楚，我会调查它并将其标记为答案。
嗨，Michael，我将添加一个示例以使思考更容易，您是否使用 npx create-next-app 来启动您的项目？
这会有很大帮助。我做到了，不过我在顶层添加了一个组件目录。
查看更新后的答案，希望对您有所帮助。
我所要做的就是给布局中的
一个网格容器类名，然后它就可以正常工作了。非常感谢您的帮助！