chobo2 chobo2 - 3 months ago 52
React JSX Question

How to Ignore Links in React Router?

I am trying to implement react router into my app but I am running into a issue where I have some "links" that display "modal" dialogs but react router is treating them as routes and sending me back to my "home" page

<a href="#" onClick={() => this.props.Show(true) }><i className="fa fa-plus" aria-hidden="true">


router

ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Home}></IndexRoute>
<Route path="app" name="app" component={App}></Route>
</Route>
</Router>
</Provider>,
document.getElementById('root')
);


That link is in a component in the "App" component.

Answer

If you want prevent an anchor tag from navigating, it is recommended that you add

event.stopPropagation()

to your onClick event handler.

Comments