我希望在 Next.JS 中创建 2 个页面，其中 2 个页面之间有分页和 args

Question

我想要什么：在 React.JS 中的 Next.JS 中创建 2 个页面，可以执行以下操作：

用户登陆有搜索栏的第 1 页（/home）
用户在页面中输入 1 在搜索栏中输入他想要的内容并验证表单
使用 URL 参数中的查询字符串将用户重定向到第 2 页（/search/:parameter）...
向第 2 页发出 HTTP 请求并传递 arg
向用户显示 http 请求的结果

我试图做的事情，但我没有成功地做到这一点

import Head from 'next/head'
import React, { Component } from 'react'
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import Link from 'next/link'

function submitForm() {
  if(process.browser) {
    alert(document.getElementById('subvalue').value)
  }
}

export default class Home extends React.Component {

  render() {
    return (
      <div className="container">
        <Head>
          <title>Reddit Feed App</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <main>
          <form action="#" onSubmit={this.handleSubmit}>
            <label>Search for any subreddit :</label>
            <input type="text" id="subvalue"/>
            <span onClick={submitForm()} >Submit</span>
          </form>
        </main>
         ...
      </div>
    )
  }
}

所以，我被卡住了，我被阻止了我已经没有成功让我的提交表单 function 工作。 怎么做？

Answer 1

首先，您必须在提交时获取输入值并以编程方式更改当前路线：

您可以通过对<input />元素进行引用来获取值：

您的第一页应如下所示/pages/index.js

import { useRouter } from "next/router";
import { useRef } from "react";

export default function IndexPage() {
  const router = useRouter();
  const inputRef = useRef(null);
  const onSubmit = (e) => {
    e.preventDefault();
    // some validations here
    router.push(`search/${inputRef.current.value}`);
  };
  return (
    <form onSubmit={onSubmit}>
      <input name="second_page" type="number" ref={inputRef} />
      <button type="submit">submit</button>
    </form>
  );
}

这将使您进入/search/[the value you submitted] 。

为了创建该动态页面，您应该使用Dynamic API Routes 。

只需创建一个名为/pages/[paramPassed].js的文件

我用 jsonplaceholder api 做了一个例子：

export default function Search({ res }) {
  return (
    <div>
      Here's the result :
      <pre>
        <code>{JSON.stringify(res)}</code>
      </pre>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const { paramPassed } = params;

  const req = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${paramPassed}`
  );
  const res = await req.json();

  return {
    props: { res } // will be passed to the page component as props
  };
}

getServerSideProps允许您在渲染页面组件之前为其设置默认参数。
您可以在 React 组件中使用 fetch API 或 SWR 进行远程数据获取； 或使用 Next.js 的数据获取方法进行初始数据填充。

我希望在 Next.JS 中创建 2 个页面，其中 2 个页面之间有分页和 args

问题描述

1 个解决方案

解决方案1
0 2020-12-03 22:48:24

我希望在 Next.JS 中创建 2 个页面，其中 2 个页面之间有分页和 args

问题描述

1 个解决方案

解决方案1 0 2020-12-03 22:48:24

解决方案1
0 2020-12-03 22:48:24