使用路由器更改表单提交时的网页
使用路由器更改表单提交时的网页
提问于 2018-03-23 10:42:46
当表单从组件Events提交时，我尝试更改为组件Party的呈现。
这是Events组件的render方法：
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，但表单仍保留在页面上，不会消失。我刚开始反应，所以我是一个彻头彻尾的菜鸟。谢谢你的帮助！
回答 1
Stack Overflow用户
发布于 2018-03-23 11:21:49
窗体始终存在，因为您总是呈现它。要在特定路径中显示窗体，并在另一个路径中显示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>，并且仅当url为/时才显示。
我认为这个react-seed项目可能会对你有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49441585
复制相关文章
相似问题
腾讯云开发者
