Use react-router; client- and server side rendering #422

okendoken · 2016-01-28T16:30:25Z

Use react-router instead of react-routing library.

As per #345

Update. Here is a live version with react-router https://limitless-wave-36322.herokuapp.com/

This change is

goldensunliu · 2016-01-31T01:41:12Z

@okendoken There is a flash of HTML without CSS on initial render. I was able to reproduce locally

okendoken · 2016-01-31T10:24:00Z

@goldensunliu agreed, I noticed it too. Looking into it

vbrvk · 2016-01-31T11:16:59Z

@okendoken The same problem when using react-routing

okendoken · 2016-01-31T18:29:24Z

@goldensunliu @borovik96, updated, please check

goldensunliu · 2016-01-31T21:59:42Z

@okendoken just curious what was the fix is since I still see it locally.

goldensunliu · 2016-01-31T22:05:12Z

src/server.js

-    await Router.dispatch({ path: req.path, query: req.query, context }, (state, component) => {
-      data.body = ReactDOM.renderToString(component);
+    match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
+      let statusCode = 200;


does Redirect work?

@okendoken I added redirect and error handling logic here: goldensunliu@d6885b9 just tested.

okendoken · 2016-02-01T08:39:29Z

@goldensunliu thanks for your comments
I tried to merge your commit and it seems that there are errors you need to fix:

  44:13  error  `redirectPath` is never modified, use `const` instead  prefer-const
  46:15  error  Missing semicolon                                      semi

Could you please run npm run test, check for errors, fix them and make another commit (preferably squashing your commits into a single one)? It would be also nice if you force update your fork with last changes from mine - we have different commits history. Otherwise I will have to cherry-pick.

Thanks!

goldensunliu · 2016-02-01T14:30:01Z

@okendoken I will get on it

goldensunliu · 2016-02-03T17:08:33Z

@okendoken all set flatlogic#2

jeroenransijn · 2016-02-03T22:29:36Z

Excited to see this! Thanks for the work everyone :)

jeroenransijn · 2016-02-04T02:25:02Z

I am trying out this fork/branch. I am trying to hook it up to redux, since that's what I am using. The issue that comes up is when I try to connect my component export default connect(state => state)(withStyles(Navigation, s));. The server just keeps loading, it get stuck on ReactDOM.renderToString. It's really difficult to debug this since nothing is returning. Any help is appreciated.

okendoken · 2016-02-04T07:52:28Z

@jeroenransijn I think you may try to check getContextComponent function https://github.com/kriasoft/react-starter-kit/pull/422/files#diff-3ca5e313cdf02368ce63986a36207c94R20

Sometimes I observed the same behavior when there was no page found during component lookup. We probably need to rethrow the error from the inside of this function

erichardson30 · 2016-02-12T16:38:36Z

I added the changes from master...flatlogic:feature/react-router and am getting the following warning : Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <noscript data-reacti
(server) <div data-reactid=".c

@okendoken I saw you asked about this initially...what was the fix for this?

If I make the server.js and client.js render methods match....then I get "Get http://localhost:5000/main.js not found"

okendoken · 2016-02-12T18:02:03Z

@erichardson30 the fix was to use match function on the client side also.

But where do you get it? I can't see any issues. I have just redeployed herokuapp - https://limitless-wave-36322.herokuapp.com/. See nothing there...

erichardson30 · 2016-02-12T18:28:58Z

@okendoken So when you run npm start, it tells you the server is running on localhost:5000 and it opens up the client on localhost:3000. The warning is being thrown when I access through localhost:3000. I went through https://github.com/kriasoft/react-starter-kit/pull/422/files#diff-3ca5e313cdf02368ce63986a36207c94R20 and copied all replaced all the files in my project with those.

erichardson30 · 2016-02-12T18:56:44Z

@okendoken where is the latest complete code with the react router so I can see what's wrong?

okendoken · 2016-02-14T07:57:42Z

@erichardson30 to get latest code with react-router changes you need to run

git clone https://github.com/flatlogic/react-starter-kit.git -b feature/react-router

this will create a new repo with feacture/react-router branch

Is there any way I can reproduce this issue locally?

erichardson30 · 2016-02-15T17:11:07Z

@okendoken I was able to clone that branch, merge in my changes and everything seems to be good now. Thanks for all your help :)

learntoswim · 2016-02-16T18:11:17Z

+1 - would love to see this merged.

okendoken · 2016-02-17T13:45:42Z

synced with master

erichardson30 · 2016-02-17T15:09:54Z

@okendoken Have you done anything using react-router where you implement using isomorphic rendering getting data from an external API?

Bogdaan · 2016-02-17T16:13:49Z

Great work, thanks!
If someone needs case authorization,
i merge this PR with some changes to my repo (https://github.com/Bogdaan/react-auth-kit/blob/master/src/server.js)

Bogdaan · 2016-02-20T09:34:10Z

@okendoken hi, you PR is incomplate
See https://github.com/flatlogic/react-starter-kit/blob/feature/react-router/tools/webpack.config.js
and client-side matching is incorrect

okendoken · 2016-02-20T10:05:37Z

@Bogdaan what's wrong with it?

Bogdaan · 2016-02-20T12:07:28Z

@okendoken for example see react-routing conditions in webpack.config.js (find by text match in ide).
In client.js at (https://github.com/flatlogic/react-starter-kit/blob/feature/react-router/src/client.js#L62)
Why are you use window.location and match on client-side?

okendoken · 2016-02-20T13:23:11Z

@Bogdaan please see discussion above. In order to allow asynchronous routing on the client side you need to use match as well remix-run/react-router#2714.

As of react-routing mentions, I'll remove them and update the PR, thanks for pointing out.

okendoken · 2016-02-20T14:52:58Z

react-routing mentions removed. Commits rebased

okendoken · 2016-02-22T16:14:04Z

@koistya what's your feedback on this PR? It's been here for 25 days. Are you going to merge it? Please provide a resolution, as it's a bit annoying to keep the PR in sync constantly merging changes from master. Thanks

koistya · 2016-02-22T17:23:42Z

@okendoken thanks for the PR! I'm currently working on the authentication feature, which should be done within next couple of days. Maybe I can take it over and do rebase and some modifications myself until it's ready for master branch? If you like, you can give me access to your fork, or I can give you write access to my fork.

Bogdaan · 2016-02-22T17:27:19Z

@okendoken looks like async routes works fine without render() ( see remix-run/react-router#2883 )

okendoken · 2016-02-23T10:23:42Z

@koistya thanks for your answer! Your timeline looks fine - I'll keep the fork in sync then. I was afraid this PR went unnoticed at all ;)

Just in case, I added you as a collaborator to our repo.

Stupidism · 2016-04-06T09:16:42Z

How is the progress?

okendoken · 2016-04-06T12:11:50Z

@stupidisum the code https://github.com/flatlogic/react-starter-kit/tree/feature/react-router was completely ready more than two month ago and we kept it in sync with react-starter-kit master branch for the whole month and asked project creator @koistya to provide a resolution on this PR. However, it seems that they are not really interested in introducing react-router to this repo and we won't be able to spend more resources on keeping this ignored PR in sync.

Feel free to use our repo and, if you like, keep it in sync with react-starter-kit.

Thanks!

Refs #160

learntoswim · 2016-04-06T14:43:19Z

@okendoken That's shame!

Stupidism · 2016-04-08T07:26:38Z

I'm struggling in doing this on my own these days.
This pr is OK for now.
But once authentication is added. Boom! Server-render problem again.
And today, I found this and they've been much more further than react-starter-kit.

I feel this repo is not that active these days. @okendoken

dhyegocalota · 2016-05-31T13:34:48Z

I'm really waiting for this merge 👍

goldensunliu · 2016-05-31T13:59:09Z

@dhyegofernando just use the fork for now. I don't think it will be merged into this project

dhyegocalota · 2016-05-31T14:27:34Z

@goldensunliu that's what I'm gonna do but it could be really useful if created in a separated branch just like feature/redux, like our friend @okendoken did... what do you think @koistya? Everybody is excited with that.

Thanks for the project.

gardner · 2016-07-21T23:03:49Z

It would be great to have the option to use react-router. The react-routing library doesn't meet our needs.

okendoken · 2017-05-24T13:29:22Z

A small update to this pr:

We forked RSK and created react-dashboard. It has react-router & bootstrap integrated. We plan to continuously maintain it and keep it in sync with RSK.

ulani · 2021-05-27T19:08:23Z

@okendoken thank you very much for this PR! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.

okendoken force-pushed the feature/react-router branch from a8d461b to 12042fd Compare January 30, 2016 09:04

okendoken force-pushed the feature/react-router branch from 12042fd to bed5f5d Compare January 31, 2016 18:28

goldensunliu reviewed Jan 31, 2016
View reviewed changes

okendoken force-pushed the feature/react-router branch from 4acb513 to bed5f5d Compare February 1, 2016 08:35

frenzzy mentioned this pull request Feb 4, 2016

General discussion #430

Closed

okendoken force-pushed the feature/react-router branch from 53f4474 to 5bc1930 Compare February 17, 2016 13:44

okendoken force-pushed the feature/react-router branch from 5bc1930 to 2074e5a Compare February 18, 2016 09:30

okendoken force-pushed the feature/react-router branch from 2074e5a to bb57c67 Compare February 20, 2016 14:25

okendoken force-pushed the feature/react-router branch 3 times, most recently from bb57c67 to 19affa3 Compare February 22, 2016 16:09

okendoken force-pushed the feature/react-router branch 2 times, most recently from 1333c2d to 1785a23 Compare February 29, 2016 15:20

okendoken and others added 2 commits March 2, 2016 15:52

Use react-router; client- and server side rendering

eae1788

add react router redirect and error handling

e1ea684

okendoken force-pushed the feature/react-router branch from 1785a23 to e1ea684 Compare March 2, 2016 13:07

Bogdaan mentioned this pull request Mar 11, 2016

Will you be implementing react-router? #160

Closed

ulani closed this May 27, 2021

Use react-router; client- and server side rendering #422

Use react-router; client- and server side rendering #422

Conversation

okendoken commented Jan 28, 2016

goldensunliu commented Jan 31, 2016

okendoken commented Jan 31, 2016

vbrvk commented Jan 31, 2016

okendoken commented Jan 31, 2016

goldensunliu commented Jan 31, 2016

goldensunliu Jan 31, 2016

Choose a reason for hiding this comment

goldensunliu Jan 31, 2016

Choose a reason for hiding this comment

okendoken commented Feb 1, 2016

goldensunliu commented Feb 1, 2016

goldensunliu commented Feb 3, 2016

jeroenransijn commented Feb 3, 2016

jeroenransijn commented Feb 4, 2016

okendoken commented Feb 4, 2016

erichardson30 commented Feb 12, 2016

okendoken commented Feb 12, 2016

erichardson30 commented Feb 12, 2016

erichardson30 commented Feb 12, 2016

okendoken commented Feb 14, 2016

erichardson30 commented Feb 15, 2016

learntoswim commented Feb 16, 2016

okendoken commented Feb 17, 2016

erichardson30 commented Feb 17, 2016

Bogdaan commented Feb 17, 2016

Bogdaan commented Feb 20, 2016

okendoken commented Feb 20, 2016

Bogdaan commented Feb 20, 2016

okendoken commented Feb 20, 2016

okendoken commented Feb 20, 2016

okendoken commented Feb 22, 2016

koistya commented Feb 22, 2016

Bogdaan commented Feb 22, 2016

okendoken commented Feb 23, 2016

Stupidism commented Apr 6, 2016

okendoken commented Apr 6, 2016

learntoswim commented Apr 6, 2016

Stupidism commented Apr 8, 2016

dhyegocalota commented May 31, 2016

goldensunliu commented May 31, 2016

dhyegocalota commented May 31, 2016 • edited

gardner commented Jul 21, 2016

okendoken commented May 24, 2017

ulani commented May 27, 2021 • edited

dhyegocalota commented May 31, 2016 •

edited

ulani commented May 27, 2021 •

edited