Electron-react-boilerplate: React router redirection doesn't work

[erick2014]

I can't perform a redirection using react router, I have added a button which calls history.push, but it doesn't work

I have checked this PR:
https://github.com/chentsulin/electron-react-boilerplate/pull/949

But I still not able to redirect to another page, even using the example from the starter kit

[anthonyraymond]

Hi @erick2014 the #949 has been merged in dev-master branch (not in master yet), the fix will most likely come out with 0.11.2.

To fix this, you can manually apply change to file in https://github.com/chentsulin/electron-react-boilerplate/pull/949/files until 0.11.2 come out.

[erick2014]

@anthonyraymond I actually had tested your changes but I was missing a small part, I didn't realize you had removed the Router component from routes.js file, so I had this:

 <Router>
    <App>
      <Switch>
        <Route path="/" component={LoginPage} />
        <Route path="/home" component={HomePage} />
      </Switch>
    </App>
  </Router>

Instead of this:

<App>
      <Switch>
        <Route path="/" component={LoginPage} />
        <Route path="/home" component={HomePage} />
      </Switch>
    </App>

Thx for your help @anthonyraymond

[anthonyraymond]

No problem ;)

[erick2014]

The only weird thing that I found after the fix, was when moving the router paths:

http://screencast-o-matic.com/watch/cbfto1XoJU

the app got in blank and you have to close it and open it again

[anthonyraymond]

It it only happening when changing router.js?

[erick2014]

@anthonyraymond in routes.js file, and if u refresh the page you also get a blank page

[anthonyraymond]

@erick2014 if you don't change the route.js, but reload the UI with CTRL+R it bug as well?

[erick2014]

@anthonyraymond yes man, if I press cmd + r within "/home" page, I got a blank page, looks like we need a way to tell the router what is its root path: this is my routes file:

<App>
      <Switch>
        <Route path="/home" component={HomePage} />
        <Route path="/" component={LoginPage} />
      </Switch>
    </App>

Also I have noticed if I move the "/" path to the beginning then I trigger a history.push it will not work, so that's why I have "/home" path as my first path.

[anthonyraymond]

@erick2014 IMO the bug comes from your code. I just rebased dev-master, and tried out but everything is working.

Did you replace const router = routerMiddleware(hashHistory); const router = routerMiddleware(history); as in https://github.com/chentsulin/electron-react-boilerplate/pull/949/files#diff-9d94bec4f856963b60e57a808ff00a61R28 ?

[erick2014]

haha yes man I did it, well I am not sure if the bug is mine, but I am afraid you need a root path there, because you are changing the page with redux, so if u refresh u will lost the location where u were, well I think, I am not sure, the redirection works, but if u put the /home path as your first path, otherwise it will not work

[anthonyraymond]

Sure you need a root path. But you messed up something because the boilerplate work as expected for me

[erick2014]

@anthonyraymond I didnt change anything from the structure haha

[anthonyraymond]

One of my project is working, and the boilerplate as well.... But yours is not

[erick2014]

I'll figure out what to do later, thx any way

[anthonyraymond]

I finally was able to reproduce. I partially fixed it in #958 (merged in dev-master).

BUT

having routes defined with / first still fail.

Does not work

<Switch>
  <Route path="/" component={HomePage} />
  <Route path="/counter" component={CounterPage} />
</Switch>

Work

<Switch>
    <Route path="/counter" component={CounterPage} />
    <Route path="/" component={HomePage} />
  </Switch>

[erick2014]

@anthonyraymond that is what I was trying to explain you haha, thx

[amilajack]

Was this fully resolved?

[anthonyraymond]

Not the path order

[erick2014]

@amilajack yep, we are waiting for this pr https://github.com/chentsulin/electron-react-boilerplate/pull/958 to be in master branch

[amilajack]

Was merged in v0.11.2

[erick2014]

@amilajack I was waiting for that merge, I've update to v0.11.2, and now I'm able to perform a redirection to /home page and also I can refresh the page with cmd + r and still working, yujuu, thx @anthonyraymond for that update!!!

[amilajack]

Thank @anthonyraymond. He did all the work

[arcanrun]

I think the main problem is in "exact" prop: you should pass it to the component, which has path "/"

https://reacttraining.com/react-router/web/api/NavLink/exact-bool

otherwise the React router will be confused, because a slash is present in every path ...