[英]Next.js keep the state or send props when router.push
I'm new to Next.js and I am redirecting the user to next page using router.push
我是 Next.js 的新手,我正在使用
router.push
将用户重定向到下一页
router.push("/terminal_summary");
My Redux state is empty on the next page, but I need the data I have in the state.我的 Redux state 在下一页是空的,但我需要 state 中的数据。 How do I keep it or at least how can I send some props with
router.state
?我该如何保留它,或者至少如何使用
router.state
发送一些道具?
I tried router.push("/terminal_summary", undefined, { shallow: true });
我试过
router.push("/terminal_summary", undefined, { shallow: true });
but it doesn't work.但它不起作用。
I have also tried:我也试过:
router.push({
pathname: '/terminal_summary',
query: props.terminalPayload
})
But it sends data in query parameter.但它在查询参数中发送数据。
The best thing would be to keep all the data in state or at least I want to be able to redirect with props.最好的办法是将所有数据保留在 state 中,或者至少我希望能够使用道具重定向。
EDIT:编辑:
On the next page I'm trying to access the Redux state using mapStateToProps
在下一页上,我正在尝试使用 mapStateToProps 访问 Redux
mapStateToProps
function mapStateToProps(state) {
return {
terminalPayload: state.terminalPayload,
};
}
But this state after redirecting is showing initialState
instead of the changes I have done on the previous page.但是重定向后的这个 state 显示的是
initialState
而不是我在上一页所做的更改。
So the value is {}
but it is supposed to be an object like below.所以值是
{}
但它应该是 object ,如下所示。
{
merchant: [{ /*multiple objects*/ }],
products: [{ /* multiple products*/}],
// other data
}
Please note, this is currently not saved in the db and supposed to be saved on the next page where I want to show the summary then ask user to save.请注意,这目前没有保存在数据库中,应该保存在我要显示摘要的下一页上,然后要求用户保存。
Another note, I can see the data from Redux DevTools in Chrome but when I access on the page it is {}
.另请注意,我可以在 Chrome 中看到来自 Redux DevTools 的数据,但是当我在页面上访问时,它是
{}
。
EDIT 2:编辑2:
here is the complete redux code:这是完整的 redux 代码:
configureStore.js configureStore.js
export default (initialState) => {
return createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(thunk, reduxImmutableStateInvariant()))
);
};
reducers/index.js减速器/index.js
const rootReducer = combineReducers({
terminals,
merchants,
distributors,
terminalPayload,
roles,
/* other reducers */
});
export default rootReducer;
initialState.js初始状态.js
export default {
terminals: {
imported: [],
},
merchants: [],
distributors: [],
terminalPayload: {},
roles: [],
};
I'm using next.js so i have _app.js file where i have this code:我正在使用 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>
);
}
then i have some actions and where is how i subscribe to it然后我有一些动作,我在哪里订阅它
terminal.js终端.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);
terminal_summary.js terminal_summary.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);
i have been looking into this and im not sure if it is something related to this:我一直在研究这个,我不确定它是否与此有关:
https://nextjs.org/docs/api-reference/data-fetching/getInitialProps
https://github.com/kirill-konshin/next-redux-wrapper
https://nextjs.org/docs/api-reference/data-fetching/getInitialProps
https://github.com/kirill-konshin/next-redux-wrapper
Nextjs doesn't really allow for route state like many other common client-side routing/navigation libraries, but you can send data via the query parameter and then "hide" them from the address bar using the as
parameter of router.push . Nextjs 并不像许多其他常见的客户端路由/导航库那样真正允许路由 state,但您可以通过查询参数发送数据,然后使用router.push的
as
参数从地址栏中“隐藏”它们。
as
- Optional decorator for the URL that will be shown in the browser.as
- 将在浏览器中显示的 URL 的可选装饰器。 Before Next.js 9.5.3 this was used for dynamic routes, check our previous docs to see how it worked在 Next.js 9.5.3 之前,它用于动态路由,查看我们之前的文档以了解它是如何工作的
router.push(
{
pathname: '/terminal_summary',
query: props.terminalPayload
},
'/terminal_summary',
);
On the receiving route access the query
object.在接收路由上访问
query
object。
const router = useRouter();
const terminalPayload = router.query; // <-- terminalPayload sent in query parameter
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.