Migrate to react router v4.

[anuraaga]

React router v4 is a big change in paradigm, resulting in big changes in routing-related generators and templates. I'm hoping that future PRs can re-enable true hot-reloading after this is in.

Routes have been migrated to a component, and loading logic has been moved to separate modules instead of inlining to make it easier to define child routes.

App has been made a connected component to ensure it always has the location as a prop to ensure route rerendering even if its changed to a PureComponent or redux component.

Fixes #1033

React Boilerplate

Thank you for contributing! Please take a moment to review our contributing guidelines
to make the process easy and effective for everyone involved.

Please open an issue before embarking on any significant pull request, especially those that
add a new library or change existing tests, otherwise you risk spending a lot of time working
on something that might not end up being merged into the project.

Before opening a pull request, please ensure:

• You have followed our contributing guidelines
• double-check your branch is based on dev and targets dev
• Pull request has tests (we are going for 100% coverage!)
• Code is well-commented, linted and follows project conventions
• Documentation is updated (if necessary)
• Internal code generators and templates are updated (if necessary)
• Description explains the issue/use-case resolved and auto-closes related issues

Be kind to code reviewers, please try to keep pull requests as small and focused as possible :)

IMPORTANT: By submitting a patch, you agree to allow the project
owners to license your work under the terms of the MIT License.

[coveralls]

Coverage increased (+0.06%) to 99.298% when pulling 3be5a26 on anuraaga:dev_rag into cfe0c7c on react-boilerplate:dev.

[blling]

Could you give a suggestion to manage saga lifecycle like #1420 ?

[anuraaga]

@VicBell react router callbacks are replaced by just using react component lifecycle. I think it'll be easy to achieve the same effect by updating AsyncRoute

• Split loader and injector logic of components
• In AsyncRoute, add componentWillMount which injects the sagas and stores a reference on this, and componentWillUnmount which cancels them.

Given how big this PR is with the minimum to add react router v4, I'd like to work on the saga lifecycle in a subsequent one if that makes sense.

[blling]

Great work. Thanks !

[blling]

There is a warning message when start up dev_rag branch

npm run start

react-boilerplate@3.4.0 start /home/bfan/git/react-boilerplate
cross-env NODE_ENV=development node server

Server started ! ✓

Access URLs:
Localhost: http://localhost:3000
LAN: http://172.26.3.83:3000

Press CTRL-C to stop

(node:5299) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

webpack built 1435bb44a8547abe98d8 in 3697ms

[anuraaga]

@VicBell I can't reproduce any warning on my Macbook. Did you make sure to run yarn to have the same dependencies?

This has no warning

$ git clone git@github.com:anuraaga/react-boilerplate.git react-boilerplate-test
$ cd react-boilerplate-test
$ git fetch
$ git checkout dev_rag
$ yarn
$ npm run start

[blling]

I get a network trouble if i use yarn..., Mybe it is my mistake at somewhere.

[1/4] Resolving packages...
[2/4] Fetching packages...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
warning There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz: tunneling socket could not be established, cause=connect EINVAL 0.0.31.144:80 - Local (0.0.0.0:0)".

Finally I delete proxy and restart my computer these issue go away and after yarn and i start dev_rag branch the DeprecationWarning also go away.

[anuraaga]

Any maintainer able to take a look at this? @KarandikarMihir maybe?

FWIW, in an app where I'm using this code, I've also gone ahead and migrated to react-hot-loader v3 and have perfect live reload with async routes - we can get back to the happier days of react-boilerplate :)

[blasterpistol]

Create some child route and you have got a not found page.

[anuraaga]

@DenisNeustroev Did you follow the updated instructions in the README?

https://github.com/anuraaga/react-boilerplate/blob/3be5a26a752b93d24581bee3c27fb1fbbca6cbd6/docs/js/routing.md

I'm not having any problem (the trickiest part is probably remembering to remove "exact" from the routes.js route for the parent page.

If you still have problems, please push a branch so I can check it out.

[blasterpistol]

Yes, my bad, its works like a charm. But there is another problem. I don't use PureComponent, and on route change my parent container re-renders twice, the first is on location change, the second when a child route loads itself, so AsyncRoute try load child route twice.

[blasterpistol]

Also AsyncRoute can pass store in loader func itself instead of doing it in every container

[blasterpistol]

[anuraaga]

@DenisNeustroev Interesting, that does seem weird. I'd like to repro it, but a simple attempt with parents and children, all Component, with console.log in render() doesn't show anything out of the ordinary. Can you look at ParentPage and ChildPage1/2 in this branch to see what the difference might be with your use case?

https://github.com/anuraaga/react-boilerplate/tree/dev_rag_parent_child
Navigate to http://localhost:3000/parent and click on a child link - in the console, rendering child only shows once.

[NantawatS]

When I try using histroty.push() inside a async function it doesn't work. The location was changed but still stay on the same page.

<button
    onClick={() => {
        request.get('xxx', ()=> {
            history.push('/afterlogin');
        });
    }}
>link</button>

But if I do some think like this, it's work.

<button
    onClick={() => {
        request.get('xxx', ()=> history.push('/afterlogin'));
    }}
>link</button>

Any ideas?

[NantawatS]

I solved the issue using this approach. (link) It's not this PR issue.

[leifdalan]

@anuraaga You said you have react-hot-loader v3 working with this branch? I can't seem to get it to work with stateful components. Do you have a gist of your app/app.js file?

[anuraaga]

@leifdalan Here's the diff where I added hot-reload to a project.

https://gist.github.com/anuraaga/782b017d493f2cc20af85cd9eb4634d1

The project has Component, PureComponent, and SFC and all seem to update ok - none of them use setState though, if that's what you mean by stateful component, I'm not sure whether that would have a different result. If there's a simple repro, would be happy to take a look.

[wer32]

Why do we need location here. the variable is not used.

[anuraaga]

Without having location in the props, App will not rerender on location change if the component is pure or connected, as react-router-v4 relies on normal react rerendering semantics. Even if location isn't used, I think it's a good default to pass location to App to minimize rerender issues.

[Dattaya]

That's one of the unfortunate gotchas of new react-router. @anuraaga, please add a comment above each location: ..., I'm thinking about:

Propagate location to every connected or extending React.PureComponent component that needs to be updated on route transition. For more on this, read https://reacttraining.com/react-router/web/guides/dealing-with-update-blocking

[wer32]

I found issue in current pull request.

The issue in routes.js it is required to add withRoutes as well as containers/App/index.js
For me it makes sence to think about moving routes.js to App/index.js

[blling]

@wer32 I also have the same issue.
@anuraaga Could you take a look at this problem?

[anuraaga]

@wer32 @VicBell Fixed the route re-rendering on back button issue, and also switched not-found matching to non-exact (for some reason it was still working with exact for me, though indeed it seems incorrect).

[mihir0x69]

Oh my god! So much work being done here. Thanks @anuraaga for all your efforts. I'll try it out this weekend! Thanks again.

[wer32]

@anuraaga @KarandikarMihir I totally agree. Great work! loader.js for components are awsome and elegant.

[peter-mouland]

I too love the approach of the loaders...
Is slightly off topic, but out of interest to gauge public opinion...
Do people who do this recommend the approach of making every route async,
or
Do you generally only make less frequented pages async, like admin and or faq's etc?

[justingreenberg]

this has been a literally been a global effort—on behalf of maintainers and users of RBP i'd like to thank everyone again for their time and contributions!

i'm pulling the trigger and merge into dev now :)

[anuraaga]

Thanks @justingreenberg this is great! And thanks @Dattaya for basically rewriting my PR to make it much better :)

[nclsjstnn]

i thank you all for this effort. kudos

[donszek]

@justingreenberg @anuraaga Hello, thanks for this wonderful feature.

I created an issue at #1899

Basically I tried to export array of generator function which is like below. However it does not work anymore like the usual case in 3.4. May I know is this supposed to be like this? How should I then export multipler saga-watchers?

Cheers

export function* watch1() {
  yield takeLatest(CONSTANT1, DO_1);
}
export function* watch2() {
  yield takeLatest(CONSTANT2,DO_2);
}

export default [
  watch1,
  watch2,
];

[blling]

@donszek
I think you should take a look at here, it help me a lot

[donszek]

@VicBell that is sure very helpful. thanks for the reference. appreciate it.

[williamgranli]

I'm looking for help regarding the workflow of this project. I'm looking to start up a new react project and I've previously used this boilerplate.

I'd like to get react-router v4 changes into my new project and I'm wondering what the best approach would be. Is the dev branch ready to go and relatively safe to use? I can see that it's a couple of commits behind master.

Or should I simply go for master and fetch the v4 updates as soon as they're merged with master on here.

Thanks!

[anuraaga]

I have been using dev in a couple of new projects and haven't had any issues - it fixes many issues compared to master related to saga lifecycle so I'd personally recommend forking off of dev.

The model for dev and master are quite different right now due to this router work, so if you were to go with master now the upgrade later will be a good amount of work.

[shic]

@blling Maybe this part of code should be like this

export default compose(
  injectSaga({ key: 'home', saga: homeSaga });
  injectSaga({ key: 'test', saga: testSaga });
)(MyComponent);

instead of

export default compose(
  injectSaga({ key: 'home', homeSaga });
  injectSaga({ key: 'test', testSaga });
)(MyComponent);

Otherwise it will not work.

You inspired me of including different sagas in the same container. But after experimenting, found that the key should always be saga.

[blling]

@shic Yes, you are right, saga is the param name of injectSaga, should always be saga. If your saga has a different name, you must pass the params like injectSaga({ key: 'yoursagakey', saga: yoursaganame });

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.