Not compatible with this.props.history.push?

[vpdc]

When going to another page using this.props.history.push, I can't seem to use this with a protected route stateless component which restricts the access of a page to a view when no user is logged in.

[vpdc]

Here's my code. When I go to another page(using this.props.history.push), it won't display unless I refresh it.

[vpdc]

It also doesn't seem to work with the <Link to='/home'> tag.

[xtuc]

Interesting, do you have an error in the developer console?

Do you mind creating a small repository showing this issue? Thanks. Could you reproduce it using the examples?

[vpdc]

i'll send it on a zip.

[vpdc]

myproject.zip

Steps to run:

1. npm install
2. npm run build:all
3. to start: npm run dev:unix (if you're in linux)

[vpdc]

I didn't receive an error in the console. Oopps. my bad. It's an outdated project that I sent you .. wait..
myproject.zip
Here.
After the 3 steps,
You have to register an account so that you could go to /farmlist. then create a farm. farmlist is a protected route, the same is true with the farm/farmId. They change links but don't render.

[xtuc]

Thanks, I'll look at it tomorrow (too late here).

[vpdc]

Ok. thanks

[xtuc]

Your app doesn't build on my side:

SyntaxError: src/views/dumb/activityForm.jsx: Unexpected token (15:2)
  13 | 
  14 | const ActivityForm = ({ onInputChange, formErrors }) => (
> 15 |   <Grid fluid style={styles.root}>
     |   ^
  16 |     <Row center="xs">
  17 |       <Col xs={12}>
  18 |         <Paper zDepth={0}>

I'll try to isolate the problem in one of my example.

[xtuc]

I wasn't able to reproduce the issue, I did the following test:

diff --git a/examples/React-router/src/Components/Home.js b/examples/React-router/src/Components/Home.js                                                                                                                                      
index ea57d48..57692f0 100644                                                                                                                                                                                                                 
--- a/examples/React-router/src/Components/Home.js                                                                                                                                                                                            
+++ b/examples/React-router/src/Components/Home.js                                                                                                                                                                                            
@@ -6,11 +6,13 @@ import Navigation from './Navigation';                                                                                                                                                                                      
                                                                                                                        
 const sleep = ms => new Promise(r => setTimeout(r, ms));                                                                                                                        
                                                                                                                        
-async function Home() {                                                                                                                                                                                                                      
+async function Home(props) {                                                                                                                                                                                                                 
   await sleep(1000);                                                                                                                        
                                                                                                                        
   const style = {backgroundColor: '#2196F3'};                                                                                                                        
                                                                                                                        
+  props.history.push("/routeA")                                                                                                                                                                                                              
+                                                                                                                                                                                                                                             
   return (                                                                                                                        
     <div className="container">                                                                                                                        
       <article className="box" style={style}>                                                                                                                        

I was redirected to /routeA and saw the routeA component.

Could you maybe try to reproduce it in the React-router example?

[vpdc]

do you have a gitlab account? I'll invite you. I've messed it up. Some hidden files with the prefix . haven't been copied.

[vpdc]

https://gitlab.com/sekiryuutei47/testproj/
Here it is.
Steps:

1. npm i
2. npm run build:all
3. npm run dev:unix
   After the 3 steps,
   You have to register an account so that you could go to /farmlist. then create a farm. farmlist is a protected route, the same is true with the farm/farmId. They change links but don't render.

p.s. A protected route is a route that only logged in user could access.

[vpdc]

Ow, it rendered probably because /routeA isn't a protectectedRoute.

[vpdc]

Here's the list of protected routes.

[xtuc]

I would like to help you really but I need a way to reproduce easily your issue in order to fix quickly.

Could you please reproduce the issue in my minimal React-router example available in this repo?

[vpdc]

I found this article, Links change URL but doesn't render component
We have the same problem, but the problem occurs only when I use async-reactor which is actually strange. I tried the React-router example link that you've sent but I can't seem to reproduce the error.

[vpdc]

Are you using this one?

[xtuc]

No, async-reactor is not using shouldComponentUpdate.