反應路由器鏈接到post.id，保持post_index的DOM

Question

截圖：

當我點擊從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組件，以便只有一個路線匹配。但是，你需要改變你的路由的順序，使/路線最後，像這樣

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

一定要導入Switch如果你打算使用它。