我如何使用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) 
    } 
}