1
votes

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

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

1 Answers

0
votes

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.