[Router] Pages in subdirectories are not rendered properly

[cannikin]

Possibly related to #4896

When a page is in a subdirectory:

web/src/pages/Jobs/JobsPage.js

When deployed to a production environment (Netlify, in this case, or yarn rw build && yarn rw serve), following a link to the page results in the proper render behavior:

However, going directly to the URL (clicking in the address bar and pressing Enter) does not:

Note that the Layout (header and footer) are rendered, just not the content of the page.

This behavior is not present when using yarn rw dev

@noire-munich found a workaround: have the page export a single, anonymous default function, rather than a named variable that's then exported after the fact:

// broken
const JobsPage = () => {
  // ...
} 
export default JobsPage

// works
export default function () {
  // ...
}

The way that doesn't work is the style that our page generators create.

Not sure if this is related, but pages that are in subdirectories are not auto-imported correctly into Routes.js and need to be imported manually:

import JobsPage from 'src/pages/Jobs/JobsPage'

Steps to Reproduce

The bug is fixed in the main branch, but if you checkout commit 531ce408 you can see it: https://github.com/redwoodjs/sprout

Locally run yarn rw build && yarn rw serve.

[dac09]

To confirm @cannikin or @noire-munich - the bug happens even when you add the explicit import of the Jobs page?

[cannikin]

So for me I started with the explicit import and got the bug.

Then @noire-munich discovered that you could change the export in the pages to be export default function() and the bug would go away (while keeping the explicit import).

Then @realStandal discovered that if you just use the page name prefixed with the directory like JobsNewJobsPage then you can remove the explicit import and the bug goes away.

[dac09]

Super helpful @cannikin - appreciate it! I think I've fixed the prerender one, which likely resolves this, but I will create a test case for it too if I can.