我如何从导航项中使用 react+redux+router 发送一些东西而不渲染任何东西？

Question

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

屏幕：

路线：

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

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

Answer 1

你应该让你的"link"成为一个调用函数

的死link

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

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

相同

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

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

我如何从导航项中使用 react+redux+router 发送一些东西而不渲染任何东西？

How can i dispatch something with react+redux+router from nav item without render anything?

ecmascript-6

reactjs

react-router

react-redux