如何在不渲染任何内容的情况下从导航项中使用 react+redux+router 发送某些内容？答案

【问题标题】：How can i dispatch something with react+redux+router from nav item without render anything?如何在不渲染任何内容的情况下从导航项中使用 react+redux+router 发送某些内容？
【发布时间】：2017-09-06 03:48:10
【问题描述】：

我的应用程序有一个带导航的地图。前两个选项打开一个模式窗口进行配置。对于第三项，想要执行一个服务器进程并使用已经渲染的结果更新地图。我该如何存档？

屏幕：

路线：

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

菜单（由 Home 呈现）：

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

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

【问题讨论】：

标签： reactjs ecmascript-6 react-router react-redux

【解决方案1】：

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

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

将其保留为锚标记，以便其样式与 React-Router 的 Link 相同

那么您的 handleClick 函数将如下所示

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

【讨论】：