Question

我在反应路由器v4中编写了一些嵌套路由，在导航组件中我有一个输入框。

在提交时，我需要在不同的路线上调用方法（在着陆组件上）并传递该值。我找不到在Route中调用方法的任何示例。

欢迎使用带有数据和不同路线的导航的任何其他方式/解决方法。

我的路线：

 return (
        <div>
            <Navigation callSearch = {this.callSearch.bind(this)} />
            <Switch>

                <Route path="/u/:slug" component={AuthorPage}/>
                <Route path="/:location/:slug" component={PhotoDetails}/>
                <Route path="/" component={Landing} />
            </Switch>
        </div>
    )

在导航中我调用callSearch（）：

   searchPhotos(e) {
    e.preventDefault();

    if(this.state.searchTerm) {
        this.props.callSearch(this.state.searchTerm);
    }
}

Answer 1

我已使用withRouter模块中的react-router在我的应用程序中解决了此问题。

            import { Route } from "react-router-dom";
            import { withRouter } from "react-router";

            class SideBar extends Component {


            callSearch = (searchKeyword) => {

                if(searchKeyword)  this.props.history.push(`/u/${searchKeyword}`);

            };

            render() {
                return (
                    <div>
                        <Navigation callSearch = {this.callSearch} />
                        <Switch>

                            <Route path="/u/:slug" component={AuthorPage}/>
                            <Route path="/:location/:slug" component={PhotoDetails}/>
                            <Route path="/" component={Landing} />
                        </Switch>
                    </div>
                )
            }


            export default withRouter(SideBar);

希望这会帮助其他人!!!

如何使用React Router v4中的Route调用组件中的方法？

1 个答案: