どうすればレンダリングなしでナビアイテムからreact + redux + routerで何かをディスパッチできますか？

Question

私のアプリケーションにはnavを持つ地図があります。最初の2つのオプションは、設定用のモーダルウィンドウを開きます。 3番目の項目では、サーバープロセスを実行し、既にレンダリングされた結果をマップに更新したいとします。これをどのようにアーカイブできますか？

画面：

ルート：（ホームによってレンダリング）

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

あなたはあなたの「リンク」は、それはあなたのその後リアクト・ルータのLink

と同じようにスタイリングされますので、それをアンカータグを保つ

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

関数を呼び出して死んリンクも行う必要がありますhandleClick関数は次のようになります

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