Next.js 在 router.push 时保持状态或发送 props

Question

我是 Next.js 的新手，我正在使用以下命令将用户重定向到下一页router.push

router.push("/terminal_summary");

我的 Redux 状态在下一页上为空，但我需要该状态中的数据。我如何保留它或者至少如何发送一些道具router.state？

我尝试过router.push("/terminal_summary", undefined, { shallow: true });，但没有成功。

我也尝试过：

router.push({
  pathname: '/terminal_summary',
  query: props.terminalPayload
})

但它在查询参数中发送数据。

最好的办法是将所有数据保持在状态，或者至少我希望能够使用 props 进行重定向。

编辑：

在下一页上，我尝试使用以下命令访问 Redux 状态mapStateToProps

function mapStateToProps(state) {
  return {
    terminalPayload: state.terminalPayload,
  };
}

但显示的是重定向后的状态，initialState而不是我在上一页上所做的更改。

所以该值是，{}但它应该是一个如下所示的对象。

{
   merchant: [{ /*multiple objects*/ }],
   products: [{ /* multiple products*/}],
   // other data
}

请注意，当前未保存在数据库中，应该保存在下一页上，我想在下一页上显示摘要，然后要求用户保存。

另请注意，我可以在 Chrome 中看到 Redux DevTools 的数据，但当我在页面上访问时，它是{}.

编辑2：

这是完整的 redux 代码：

配置Store.js

export default (initialState) => {
  return createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunk, reduxImmutableStateInvariant()))
  );
};

减速器/index.js

const rootReducer = combineReducers({
  terminals,
  merchants,
  distributors,
  terminalPayload,
  roles,
  /* other reducers */
});

export default rootReducer;

初始状态.js

export default {
  terminals: {
    imported: [],
  },
  merchants: [],
  distributors: [],
  terminalPayload: {},
  roles: [],
};

我正在使用 next.js，所以我有 _app.js 文件，其中有以下代码：

import configureStore from "../redux/configureStore";

function MyApp({ Component, pageProps }) {
  let state = {};
  const store = configureStore();

  return (
    <Provider store={store}>
      <Layout>
        <Component {...state} />
      </Layout>
    </Provider>
  );
}

然后我有一些操作以及我如何订阅它

终端.js

const terminal = (props) => {
     const router = useRouter();
     /* functions */
     /* i have a function here that use router.push('terminal_summary') to redirect user to next page */
     return /* jsx */
}

function mapStateToProps(state) {
  return {
    terminals: state.terminals,
    terminalPayload: state.terminalPayload,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    terminalActions: bindActionCreators(terminalActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(terminal);

终端摘要.js

const terminalSummary = (props) => {
  const router = useRouter();


  return (
    /* jsx */
  );
};

terminalSummary.propTypes = {
  terminalPayload: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    terminalPayload: state.terminalPayload, // this object is empty here {} which is supposed to be same as i had on terminal.js page
  };
}

function mapDispatchToProps(dispatch) {
  return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(terminalSummary);

我一直在研究这个，我不确定它是否与此相关：

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps https://github.com/kirill-konshin/next-redux-wrapper

Answer 1

Nextjs 并不像许多其他常见的客户端路由/导航库那样真正允许路由状态，但您可以通过查询参数发送数据，然后使用router.pushas参数从地址栏中“隐藏”它们。

Next.js 14

页面路由器

useRouter - 这似乎与 v13 及以下版本的功能相同。

使用该as选项，与旧版本相同，例如router.push(url, as, options)

import { useRouter } from 'next/router';

...

router.push(
  {
    pathname: '/terminal_summary',
    query: props.terminalPayload
  },
  '/terminal_summary',
);

接收器

import { useRouter } from 'next/router';

...

router.push(
  {
    pathname: '/terminal_summary',
    query: props.terminalPayload
  },
  '/terminal_summary',
);

应用路由器

应用程序路由器和useRouter挂钩没有此功能。传递的任何数据都将包含在 queryString 中的 URL 路径中。

使用路由器：router.push(href: string, { scroll: boolean })

import { useRouter } from 'next/navigation';

...

router.push(`/terminal_summary?param=${terminalPayload}`);

Next.js 较旧

as- 将在浏览器中显示的 URL 的可选装饰器。在 Next.js 9.5.3 之前，这用于动态路由，请查看我们之前的文档以了解它是如何工作的

import { useRouter } from 'next/router';

...

const router = useRouter();
const terminalPayload = router.query; // <-- terminalPayload sent in query parameter

在接收路由上访问该query对象。

import { useRouter } from 'next/navigation';

...

router.push(`/terminal_summary?param=${terminalPayload}`);