反応し、ルータpost.idへのリンクを、DOMに

Question

スクリーンショットpost_indexを保つ：

私はindex_pageから私のリンクをクリックしてください。

<Link className="btn btn-info" to={`/posts/${post.id}`}>Show</Link> 

クリックはうまく動作しますが、私のpost.idはインデックスの下に読み込まれます。私のインデックスがまだDOM上にあるのはなぜですか？私はルータに何か問題があったのですか？

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { browserHistory, HashRouter, BrowserRouter, Route, Switch } from 'react-router-dom'; 
import promise from 'redux-promise'; 

import reducers from './reducers'; 
import PostsShow from './components/posts_show'; 
import PostsIndex from './components/posts_index'; 

const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter > 
     <div> 
     <Route path="/" component={PostsIndex} /> 
     <Route path="/posts/:id" component={PostsShow} /> 
     </div> 
    </BrowserRouter> 
    </Provider> 
    , document.querySelector('.app')); 

post_index.js

class PostsIndex extends Component { 
    componentDidMount() { 
    this.props.fetchPosts(); 
    } 

    onDeleteClick(id) { 
    this.props.deletePost(id,() => { 
     this.props.history.push('/'); 
    }); 
    } 

    renderPosts() { 
    return _.map(this.props.posts, post => { 
     return (
     <tr key={post.id}> 
      <td>{post.thumb_url}</td> 
      <td>{post.id}</td> 
      <td>{post.title}</td> 
      <td>{post.slug}</td> 
      <td>{post.created_at}</td> 
      <td>{post.update_at}</td> 
      <td> 
      <Link className="btn btn-info" to={`/posts/${post.id}`}>Show</Link> 
      <button className="btn btn-danger" onClick={this.onDeleteClick.bind(this, post.id)}>Delete</button> 
      </td> 
     </tr> 
    ); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <h3>Posts</h3> 
     <table className="table table-condensed"> 
      <thead> 
      <tr> 
       <th>thumb</th> 
       <th>id</th> 
       <th>title</th> 
       <th>slug</th> 
       <th>created_at</th> 
       <th>update_at</th> 
       <th width="10%">action</th> 
      </tr> 
      </thead> 
      <tbody> 
      {this.renderPosts()} 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { posts: state.posts }; 
} 

export default connect(mapStateToProps, { fetchPosts, deletePost})(PostsIndex); 

post_show.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router-dom'; 
import { fetchPost } from '../actions'; 

class PostsShow extends Component { 
    componentDidMount() { 
    const { id } = this.props.match.params; 
    this.props.fetchPost(id); 
    } 

    render() { 
    const { post } = this.props; 

    if (!post) { 
     return <div>Loading...</div>; 
    } 

    return (
     <div> 
     <br /> 
     <Link className="btn btn-info" to="/">Back To Index</Link> 
     <h3>{post.title}</h3> 
     <p>{post.content}</p> 
     </div> 
    ); 
    } 
} 

function mapStateToProps({ posts }, ownProps) { 
    return { post: posts[ownProps.match.params.id] }; 
} 

export default connect(mapStateToProps, { fetchPost })(PostsShow); 

Answer 1

<Route path="/" component={PostsIndex} /> 
<Route path="/posts/:id" component={PostsShow} /> 

/posts/:id満たしても/ので、あなたはそれが正確に/、そう

<Route exact path="/" component={PostsIndex} /> 
<Route path="/posts/:id" component={PostsShow} /> 

一つの他のオプションのようなreact-router年代Switchを使用しているかどう/にのみ一致するようにそれを作る、両方のコンポーネントを表示したくありません1つの経路だけが一致するようにします。あなたはそれを使用するつもりならしかし、/ルートが最後になるように、あなたのルートの順序を変更する必要があり、そう

<Switch> 
<Route path="/posts/:id" component={PostsShow}/> 
<Route path="/" component={PostsIndex}/> 
</Switch>  

ようSwitchをインポートしてください。