简体   繁体   中英

Unable to programmatically change route in react-router

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM