javascript - 如何忽略 React Router 中的链接？

Question

我正在尝试在我的应用程序中实现 React 路由器，但我遇到了一个问题，我有一些显示“模态”对话框的“链接”，但 React 路由器将它们视为路由并将我送回我的“家”页

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

路由器

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')
);

该链接位于“App”组件中的一个组件中。

编辑

我现在有这个

 return (
            <a href="#" id="add-new-storage-item-btn" className={addNewItemClasses} onClick={(event) => this.setAddStorageItemModal(event) }><i className="fa fa-plus" aria-hidden="true"> Add New Item</i></a>
        );

  setAddStorageItemModal(event)
   {
       this.props.setAddStorageItemModal(true);
       event.stopPropagation();

   }

我尝试将 event.stopPropagation 放在第一行但不起作用。

Answer 1

如果你想阻止一个 anchor 标签导航，建议你加上

event.stopPropagation()

到您的 onClick 事件处理程序。