Next js - 使用动态 URL 重新加载

Question

我用和创建了动态页面。Next jsRedux

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

1. 登入

2. 重定向到index.html使用next/router.

3. 单击一个<Link href="/DYNAMIC_PAGE"/>.

4. 进入/DYNAMIC_PAGE页面。

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

当我点击并<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}}>