代码之家 › 专栏 › 技术社区 › GregH

反应渲染部分路由匹配上的两个组件

reactjs

GregH · 技术社区 · 7 年前

我现在开始使用react,并定义了两个路径:

<Route path='/articles' component={ArticlesIndex} />
<Route path='/articles/create' component={ArticlesCreate} />

访问时 /articles 只有我 ArticlesIndex 组件按我的预期呈现。但是,当导航到 /articles/create ,我的 ArticlesIndex 和 ArticlesCreate 尽管我的 ArticlesCreate Component没有对 ArticlesIndex的引用,但组件都在页面上呈现。由于路由包含在 articles/create


   
    
     我怎样才能克服这个问题?
    
    
     为了完整起见,下面是我的两个组件:
    
    
     
      ArticlesIndex
     
     component:。
    
    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>
    );
  }
}

    
     和
     
      ArticlesCreate
      
       component:。
      
     
    
    
     
      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");  
            })  

}
}

2 回复 | 直到 7 年前

Alexis 7 年前

你忘了在你的 <Route /> 和网址 /articles/create 正在匹配两个路由。

<Route exact={true} path='/articles' component={ArticlesIndex} />
<Route path='/articles/create' component={ArticlesCreate} />

delis 7 年前

<Route exact path='/articles' component={ArticlesIndex} />
<Route exact path='/articles/create' component={ArticlesCreate} />

尽管……


   exact

第二个不需要