Persisting React state between route navigation #590

viankakrisna · 2016-12-31T23:53:11Z

I have followed the redux example, and rendering an iframe inside a shared component. but it seems that the Provider component always rerender the app every time the route changes and triggers the iframe to reload. I want it to persist. Is it possible?

arunoda · 2017-01-01T01:30:33Z

Currently it's kind a hard to have this.
We only persist module state only.
When we are switching pages, it'll render new React components (pages).
So, that's why we see that.

Currently, I hope we could do something with a custom document.

shelldandy · 2017-01-01T02:26:40Z

Maybe save the current state in localstorage and if it exists load it from there on the next page?

arunoda · 2017-01-01T03:20:56Z

@Mike3run That's not what @viankakrisna is asking.
We have JS module level persistence. So no need to use local storage.

But @viankakrisna is asking about the React state. Because of that, his iframe inside the common component getting re-rendered again.

viankakrisna · 2017-01-01T03:40:58Z

@arunoda I'm testing your suggestion with custom document:

    <html>
      <Head>
        <link rel='stylesheet' href='/static/style.css' />
      </Head>
      <body>
        <Provider store={this.store}>
          <div>
            <Navbar />
            <YouTubePlayer />
            <Main />
          </div>
        </Provider>
        <NextScript />
      </body>
    </html>

But getting this error:

Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Component)".

It seems that the pages cannot see the Provider.

rauchg · 2017-01-01T04:29:31Z

Are you sure he's asking about React state vs a re-usable global store ?

arunoda · 2017-01-01T06:31:03Z

@rauchg I figured it based on this comment:

rerender the app every time the route changes and triggers the iframe to reload.

Anyway, @viankakrisna could you send us a sample repo. May be we could think something to do.

viankakrisna · 2017-01-01T08:57:19Z

@rauchbg yes, i'm talking about react state. Sorry if it's not clear enough. @arunoda, will do when i get home. Like you said, I think the issue is it always renders new React component on route changes. Can we treat the pages as the children of the Document? So the main shell shouldn't be recreated every route changes.

ps: sorry for my english, not a native :(

arunoda · 2017-01-01T10:06:00Z

@viankakrisna let's see what we can do with the example.

timneutkens · 2017-06-11T21:10:57Z

Closing because of inactivity.

adarshsingh1407 · 2017-06-20T06:58:41Z

Next.js is great for SSR and code-splitting. It's on path to be an amazing framework.

But I had the same issue as @viankakrisna while making an audio player webapp.
I want my AudioComponent which plays music, to maintain its state, while the user browses through the genres and artists to add them to his playlist.

It would be great if you guys could do something about it.

For reference, here is the github repo the player app :
nextjs-audio-player

arunoda · 2017-06-20T07:02:48Z

@adarshsingh1407 for now you can do this by wrapping all these functionalities into a single page and use our custom routing API to do custom URLs.

bookercodes · 2017-06-30T09:41:50Z

@arunoda So I would have one page that conditionally renders a view from render? Something like,

render () {
   if (condition) {
     return this.renderThis()
   } else {
      return this.renderThat()
   }
}

?

Can you please elaborate on what you mean by custom API routing and how we can accomplish that with Next?

shelldandy · 2017-06-30T10:35:44Z

@bookercodes https://github.com/zeit/next.js/tree/v3-beta/examples/with-next-routes

d4ny0 · 2017-11-30T23:36:27Z

do you have a solution for this problem using a custom express server?
i use the routing like this:
server.js:

const webRoutes = require('./app/routes/web')(server, app);
server.get('*', (req, res) => handle(req, res));

routes.js:

// import controller middlewares
const authController = require('../controllers/authController');

// define the actual page files for each route
const render = {
	index: app => (req, res) => app.render(req, res, '/index'),
	create: app => (req, res) => app.render(req, res, '/assignment/create'),
	preview: app => (req, res) => app.render(req, res, '/assignment/preview'),
};

// link url to pages, apply middlewares where needed
module.exports = (server, app) => {
	server.get('/dashboard', authController.login, render.index(app));
	server.get('/create', render.create(app));
	server.get('/create/assignment', render.create(app));
	server.get('/preview/assignment', render.preview(app));
};

routing this way i can apply express middlewares to my routes. but everytime i load a new page my redux state is gone

glemiere · 2018-04-05T04:42:36Z

Heeey!

@timneutkens this might be interesting to add to your checklist for v6 ;)

hakimelek · 2018-10-11T20:44:07Z

I believe that this should work now using custom App.js component.

yareyaredesuyo · 2019-05-09T09:56:45Z

example exists?

johansedgeware · 2019-06-11T17:54:12Z

So have I got it right if I'd say that this isn't possible as of yet?

alizamani · 2019-08-22T05:25:44Z

Next.js is great for SSR and code-splitting. It's on path to be an amazing framework.

But I had the same issue as @viankakrisna while making an audio player webapp.
I want my AudioComponent which plays music, to maintain its state, while the user browses through the genres and artists to add them to his playlist.

It would be great if you guys could do something about it.

For reference, here is the github repo the player app :
nextjs-audio-player

@adarshsingh1407 Did you reach a consolation to continue playing music while navigating between pages?

GusRuss89 · 2020-04-12T06:42:30Z

I came up with a solution. It has some issues but does work. Here's a gist - https://gist.github.com/GusRuss89/df05ea25310043fc38a5e2ba3cb0c016

acusti · 2021-03-18T18:41:54Z

if you use a custom App component as described here and track your state / render your providers from that component, the state will persist across route navigation, because the App component will stay rendered and not be unmounted throughout those route changes. to address your question directly, @johansedgeware:

So have I got it right if I'd say that this isn't possible as of yet?

it is possible using the custom App component and initializing / maintaining the state within the context of that component.

MagicMikeChen · 2021-12-31T03:50:03Z

I solved similar problem with this:

https://nextjs.org/docs/basic-features/layouts

Just make a HOC wrapped the whole _app and set what you want to do in the HOC.

balazsorban44 · 2022-01-30T04:05:20Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

arunoda changed the title ~~Persisting state between route navigation~~ Persisting React state between route navigation Jan 1, 2017

arunoda added the Type: Enhancement label Jan 1, 2017

arunoda added the Type: Question label Jan 1, 2017

Ehesp mentioned this issue Jan 25, 2017

Context does not apply through <Main /> #873

Closed

timneutkens closed this as completed Jun 11, 2017

viankakrisna mentioned this issue Jun 18, 2017

Create-React-App vs Next.js facebook/create-react-app#2559

Closed

snyk-bot mentioned this issue Sep 12, 2020

[Snyk] Fix for 1 vulnerabilities blubfoo/next.js#235

Open

snyk-bot mentioned this issue Jan 18, 2022

[Snyk] Fix for 1 vulnerabilities blubfoo/next.js#415

Open

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Persisting React state between route navigation #590

Persisting React state between route navigation #590

viankakrisna commented Dec 31, 2016 •

edited

Loading

arunoda commented Jan 1, 2017

shelldandy commented Jan 1, 2017

arunoda commented Jan 1, 2017

viankakrisna commented Jan 1, 2017 •

edited

Loading

rauchg commented Jan 1, 2017

arunoda commented Jan 1, 2017

viankakrisna commented Jan 1, 2017

arunoda commented Jan 1, 2017

timneutkens commented Jun 11, 2017

adarshsingh1407 commented Jun 20, 2017

arunoda commented Jun 20, 2017

bookercodes commented Jun 30, 2017

shelldandy commented Jun 30, 2017

d4ny0 commented Nov 30, 2017

glemiere commented Apr 5, 2018

hakimelek commented Oct 11, 2018

yareyaredesuyo commented May 9, 2019

johansedgeware commented Jun 11, 2019

alizamani commented Aug 22, 2019

GusRuss89 commented Apr 12, 2020

acusti commented Mar 18, 2021

MagicMikeChen commented Dec 31, 2021

balazsorban44 commented Jan 30, 2022

Persisting React state between route navigation #590

Persisting React state between route navigation #590

Comments

viankakrisna commented Dec 31, 2016 • edited Loading

arunoda commented Jan 1, 2017

shelldandy commented Jan 1, 2017

arunoda commented Jan 1, 2017

viankakrisna commented Jan 1, 2017 • edited Loading

rauchg commented Jan 1, 2017

arunoda commented Jan 1, 2017

viankakrisna commented Jan 1, 2017

arunoda commented Jan 1, 2017

timneutkens commented Jun 11, 2017

adarshsingh1407 commented Jun 20, 2017

arunoda commented Jun 20, 2017

bookercodes commented Jun 30, 2017

shelldandy commented Jun 30, 2017

d4ny0 commented Nov 30, 2017

glemiere commented Apr 5, 2018

hakimelek commented Oct 11, 2018

yareyaredesuyo commented May 9, 2019

johansedgeware commented Jun 11, 2019

alizamani commented Aug 22, 2019

GusRuss89 commented Apr 12, 2020

acusti commented Mar 18, 2021

MagicMikeChen commented Dec 31, 2021

balazsorban44 commented Jan 30, 2022

viankakrisna commented Dec 31, 2016 •

edited

Loading

viankakrisna commented Jan 1, 2017 •

edited

Loading