Question

我已经用Next js和Redux创建了动态页面。

关于我的网络使用情况，我有一个简单的流程

登录
使用index.html重定向到next/router。
单击一个<Link href="/DYNAMIC_PAGE"/>。
进入/DYNAMIC_PAGE页。

每个步骤都运行良好，但是在步骤3和步骤4之间存在一些问题。

单击并在<Link />上标记/DYNAMIC_PAGE时，它将重新加载。

它会影响我的Redux状态。

输入 DYNAMIC_PAGES

时，我想避免重新加载

如果您需要更多详细信息，请留下评论。

谢谢。

页面/[id].tsx

import * as React from "react";
import { NextPage } from "next";
import Layout from "components/Layout";
import Content from "components/courses/Content";
import axios from "axios";

const ExamplePage: NextPage = (props: any) => {
  return (
    <Layout title="About | Next.js + TypeScript Example">
      <Content
        {...props.course}
      />
    </Layout>
  );
};

ExamplePage.getInitialProps = async (props: any) => {
  const course = await axios
    .get(
      `MY_API_URL/${
        props.query.id
      }`
    )
    .then(res => res.data)
    .catch(e => e.response);
  return { course };
};

export default ExamplePage;

<Link href={`/${props.itemId}`}>
  <a className="Card">
    <div className="img-wrap">
      <img src={props.imageUrl || "/static/images/sampleImage.jpg"} />
    </div>
  </a>
</Link>

Answer 1

使用以下代码作为标签。

<Link href={/[id]?id=${props.itemId}} as={/${props.itemId}}>

下一个js-使用动态URL重新加载

1 个答案: