当router.ush时，next.js保持状态或发送道具 [英] Next.js keep the state or send props when router.push

问题描述

我是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
})

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

最好保持所有数据的状态，或者至少我希望能够使用道具重定向。

编辑：

在下一页，我正在尝试使用mapStateToProps

访问Redux状态

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

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

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

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

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

另一个注意事项是，我可以在Chrome中看到Redux DevTools中的数据，但当我访问页面时，它是{}。

编辑2：

以下是完整的还原代码：

configureStore.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;

initialState.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>
  );
}

然后我有一些操作，订阅方式在哪里

Terminal.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

推荐答案

Nextjs实际上不像许多其他常见的客户端路由/导航库那样允许路由状态，但是您可以通过Query参数发送数据，然后使用router.push的as参数从地址栏隐藏数据。

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

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

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

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

这篇关于当router.ush时，next.js保持状态或发送道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！