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

Question

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

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

登录
使用 next/router 重定向到 index.html。
单击 <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

Next js - Reloading with dynamic URL

next.js