我如何使用react + redux +路由器从nav item派发某些东西而不渲染任何东西？

Question

我的应用程序有一个导航地图。前两个选项打开配置的模式窗口。对于第三项，需要执行服务器进程并使用已经呈现的结果更新地图。我怎样才能存档这个？

屏幕：

路线：

class ModalSwitch extends React.Component { 

    constructor() { 
     super(); 
     this.previousLocation = "/" 
    } 

    componentWillUpdate(nextProps) { 
     const { location } = this.props 
     if (
      nextProps.history.action !== 'POP' && 
      (!location.state || !location.state.modal) 
     ) { 
      this.previousLocation = this.props.location 
     } 
    } 

    render() { 
     const { location } = this.props 
     const isModal = !!(
      location.state && 
      location.state.modal && 
      this.previousLocation !== location 
     ) 

     return (
      <div> 
       <Switch location={isModal ? this.previousLocation : location}> 
        <Route path='/' component={Home} /> 
        <Route path='/modal1/' component={Modal1} /> 
        <Route path='/modal2/' component={Modal2} />       
       </Switch> 
       {isModal ? <Route path='/modal1/' component={Modal1} /> : null} 
       {isModal ? <Route path='/modal2/' component={Modal2} /> : null} 
      </div> 
     ) 
    } 
} 

const Routes =() => (
    <Router> 
     <Route component={ModalSwitch} /> 
    </Router> 
) 

export default Routes 

菜单（由民政渲染）：

export default class Menu extends React.Component { 

    render() { 

     return (
      <div> 
       <Link 
        key={0} 
        to={{ 
         pathname: "/modal1", 
         state: { modal: true } 
        }}> 
        <p>Item 1</p> 
       </Link> 
       <Link 
        key={1} 
        to={{ 
         pathname: "/modal2", 
         state: { modal: true } 
        }}> 
        <p>Item 2</p> 
       </Link>         
      </div> 
     ); 
    } 
} 

我应该把一个新的链接调用服务器进程？如果是这样，我需要传递给路径名？

Answer 1

你应该让你的“链接”是一个死链接调用一个函数

<a href="javascript:;" onClick={this.handleClick}>Process</a> 

保持锚标记，以便将样式一样的阵营，路由器的Link

那么你handleClick函数看起来像这样

handleClick =() => { 
    if (someValToMakeApiCall) { 
     this.props.myProcessAction(someData) 
    } 
}