[英]React rendering both components on partial route match
I am currently getting started with react and have two routes defined as such: 我目前正在使用react入门,并定义了两条路线,例如:
<Route path='/articles' component={ArticlesIndex} />
<Route path='/articles/create' component={ArticlesCreate} />
When visiting /articles
, only my ArticlesIndex
component is rendered as I'd expect. 当访问
/articles
,只有我的ArticlesIndex
组件会按预期呈现。 However, when navigating to /articles/create
, both my ArticlesIndex
and ArticlesCreate
components are both being rendered on the page despite my ArticlesCreate
component having no reference to ArticlesIndex
. 但是,当导航到
/articles/create
,尽管我的ArticlesCreate
组件没有引用ArticlesIndex
,但我的ArticlesIndex
和ArticlesCreate
组件都在页面上呈现。 It seems as though the react router is rendering the ArticlesIndex
component due to the route being contained in articles/create
. 似乎由于路由包含在
articles/create
因此React路由器正在渲染ArticlesIndex
组件。
How can I overcome this? 我该如何克服?
For completeness' sake, Here are my two components: 为了完整起见,这是我的两个组成部分:
ArticlesIndex
component: ArticlesIndex
组件:
import React, { Component } from 'react'
export class ArticlesIndex extends Component {
displayName = ArticlesIndex.name
constructor(props) {
super(props)
this.state = { articles: [], loading: true }
fetch('https://localhost:44360/api/Articles/')
.then(response => response.json())
.then(data => {
this.setState({ articles: data, loading: false })
})
}
static renderArticlesTable(articles) {
return (
<table className="table">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{articles.map(article => (
<tr key={article.id}>
<td>{article.id}</td>
<td>{article.title}</td>
<td>{article.description}</td>
</tr>
))}
</tbody>
</table>
)
}
render() {
let contents = this.state.loading ? (
<p>
<em>Loading...</em>
</p>
) : (
ArticlesIndex.renderArticlesTable(this.state.articles)
)
return (
<div>
<h1>Articles</h1>
{contents}
</div>
)
}
}
and ArticlesCreate
component: 和
ArticlesCreate
组件:
import React, { Component } from 'react'
export class ArticlesCreate extends Component {
displayName = ArticlesCreate.name
constructor(props) {
super(props)
this.state = {
title: '',
description: '',
}
this.handleSubmit = this.handleSubmit.bind(this)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group row">
<label className=" control-label col-md-12" htmlFor="Title">
Title
</label>
<div className="col-md-4">
<input
className="form-control"
type="text"
name="title"
defaultValue={this.state.title}
required
/>
</div>
</div>
<div className="form-group row">
<label className=" control-label col-md-12" htmlFor="Description">
Description
</label>
<div className="col-md-4">
<input
className="form-control"
type="text"
name="description"
defaultValue={this.state.description}
required
/>
</div>
</div>
<div className="form-group">
<button type="submit" className="btn btn-default">
Save
</button>
</div>
</form>
)
}
handleSubmit(event) {
event.preventDefault()
const data = new FormData(event.target)
// POST request for Add employee.
fetch('https://localhost:44360/api/Articles/', {
method: 'POST',
body: data,
})
.then(response => response.json())
.then(responseJson => {
this.props.history.push('/articles')
})
}
}
You forgot to add the exact
props on your <Route />
and the url /articles/create
is matching both routes. 您忘记在
<Route />
上添加exact
道具,并且URL /articles/create
匹配这两个路线。
When exact={true}
or exact
is passed into <Route/>
props
the Route will be rendering the component if the location.pathname
match exactly you path
. 当
exact={true}
或exact
传递给<Route/>
props
,如果location.pathname
与您的path
完全匹配,则Route将呈现组件。
<Route exact={true} path='/articles' component={ArticlesIndex} />
<Route path='/articles/create' component={ArticlesCreate} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.