Unable to programmatically change route in react-router

Question

I am using react router for my single page application routing. I got multiple components which will change based on user events like click.

Now the problem is, for the IndexRoute my routing works fine, but for the subsequent route it breaks. As per my analysis react-router perfectly renders the second component but ReactDOM.render method adds '#' to url after successful rendering. It confuses react-router and makes it to render the default route.

Can anyone help me to resolve this issue?

NOTE: I am wondering why ReactDOM.render adds empty '#' to url

Can you edit your question and add a little bit of code?

Cool Acid
– Cool Acid

2016-02-12 06:59:21 +00:00
Commented Feb 12, 2016 at 6:59 — Cool Acid
– Cool Acid, Commented Feb 12, 2016 at 6:59

Gerard Mark · Accepted Answer · 2016-02-12 07:54:52Z

0

It is likely that you have not enabled the 'browserHistory' feature provided by React-Router (last I checked, it defaulted to 'hashHistory').

Try adding this to the main (clientside entrypoint to your React app) file:

import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'

/* The rest of your other code... */

render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

And see if you still get that issue.

answered Feb 12, 2016 at 7:54

Gerard Mark

133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to programmatically change route in react-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related