使用路由器更改表单提交上的网页

时间:2018-03-23 02:42:46

标签: javascript reactjs react-router components router

我正在尝试更改为名为Party的组件的呈现 表单是从组件Events提交的。

这是Events组件的渲染方法:

render() {
    return (
        <Router>
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h3> Create Event </h3>
                    {this.createUser()}
                    <div>
                        <input type="button" value="add more" onClick={this.addClick.bind(this)} />
                        <input type="submit" value="Submit" />
                    </div>
                </form>

                <div>
                    <Link to="/party">Party</Link>
                    <Route path="/party" component={Party} />
                </div>
            </div>
        </Router>
    );
}

Party组件的渲染很简单:

class Party extends Component {
    render() {
        return <h1> PARTY </h1>;
    }
}

页面已更改为/party,但表单仍保留在页面上且不会消失。我刚刚开始React,所以我是一个完整的菜鸟。 谢谢你的帮助!

1 个答案:

答案 0 :(得分:0)

表单始终存在,因为您始终呈现它。 要在特定路径中显示表单,并在另一个路径中显示Party组件,您应该使用react-router Switch组件

  

呈现与该位置匹配的第一个孩子<Route><Redirect>

可能的情况:

<Router>
    <div>
        <div>
            <Link to="/">Form</Link>
            <Link to="/party">Party</Link>
        </div>
        <Switch>
            <Route exact path="/" component={Form} />
            <Route path="/party" component={Party} />
        </Switch>
    </div>
</Router>

Form组件包含<form></form>的位置,仅在网址为/时显示。

我认为这个react-seed项目对您有所帮助。