React Router - Pathコンポーネントがレンダリングされていません

Question

ReactとReduxを使用して単純なハッカーニュースアプリを構築する作業をしており、個々の記事ページコンポーネント（ArticleSingleコンポーネント）のレンダリングに問題があります。

ルーティングは正常に機能しますが、ArticleSingleコンポーネントはクリック時にレンダリングされません。

ここでは、ルーティングのすべてを処理する私のルート・ファイル、です：

// REACT 
import React from 'react'; 
import PropTypes from 'prop-types'; 

// REACT ROUTER 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 

// REDUX 
import { Provider } from 'react-redux'; 
import createBrowserHistory from 'history/createBrowserHistory'; 
const history = createBrowserHistory(); 

// COMPONENTS 
import AppContainer from './components/containers/AppContainer'; 
import Home from './components/presentational/Home'; 
import ArticleSingle from './components/presentational/ArticleSingle'; 

const Root = ({ store }) => (
    <Provider store={store}> 
    <Router history={history}> 
     <Switch> 
     <Route path="/" component={AppContainer} /> 
     <Route path="/" component={Home} /> 
     <Route path="/topics/:topic_name/articles" component={Home} /> 
     <Route path="/articles/:article_id" component={ArticleSingle} /> 
     </Switch> 
    </Router> 
    </Provider> 
); 

Root.propTypes = { 
    store: PropTypes.object.isRequired 
}; 

export default Root; 

ここで私はとのトラブルを抱えているものですArticleSingleコンポーネントは、ですが。最終的には、URLのIDをAppContainerから渡されたアクションに渡すようにしたいのですが、私はreduxの作業を開始する前に、コンポーネントがそのページ（id）に何かをレンダリングするようにしたいと考えていました。

import React from 'react'; 
import PropTypes from 'prop-types'; 

const ArticleSingle = ({ params, children }) => (
    <div> 
    {params.article_id} 
    {children} 
    </div> 
); 
export default ArticleSingle; 

は、ここでは、それはここでAppContainerだ

import React from 'react'; 
import PropTypes from 'prop-types'; 

// Components 
import Spinner from 'react-spinkit'; 
import ArticleList from './ArticleList'; 
import TopicsSubNav from './TopicsSubNav'; 

const Home = ({ 
    loading, 
    articles, 
    topics, 
    fetchTopicArticles, 
    fetchArticles, 
    children 
}) => { 
    return (
    <div> 
     <h3 className="title is-3">Northcoders News</h3> 
     <div id="TopicsSubNav"> 
     {loading && <Spinner name="pacman" color="coral" fadeIn="none" />} 
     <TopicsSubNav 
      topics={topics} 
      onTopicClick={fetchTopicArticles} 
      onAllClick={fetchArticles} 
     /> 
     </div> 
     {loading && <Spinner name="pacman" color="coral" fadeIn="none" />} 
     <ArticleList articles={articles} topics={topics} /> 
     { children } 
    </div> 
); 
}; 

Home.propTypes = { 
    articles: PropTypes.array.isRequired, 
    topics: PropTypes.array.isRequired, 
    loading: PropTypes.bool, 
    fetchTopicArticles: PropTypes.func.isRequired, 
    fetchArticles: PropTypes.func.isRequired 
}; 

export default Home; 

のために、なぜ二つの経路があるものをフィルタバーを備えていますアプリのすべての状態を制御し、ホームコンポーネントです。

import React from 'react'; 
import PropTypes from 'prop-types'; 
import Home from '../presentational/Home'; 
import ArticleSingle from '../presentational/ArticleSingle'; 

// Redux 
import { connect } from 'react-redux'; 
import * as actions from '../../actions/actions'; 

class AppContainer extends React.Component { 
    componentDidMount() { 
    this.props.fetchArticles(); 
    this.props.fetchTopics(); 
    } 

    render() { 
    return (
     <div> 
     <Home 
      articles={this.props.articles} 
      topics={this.props.topics} 
      loading={this.props.loading} 
      fetchTopicArticles={this.props.fetchTopicArticles} 
      fetchArticles={this.props.fetchArticles} 
     /> 
     </div> 
    ); 
    } 
} 

function mapDispatchToProps (dispatch) { 
    return { 
    fetchArticles:() => { 
     dispatch(actions.fetchArticles()); 
    }, 
    fetchTopics:() => { 
     dispatch(actions.fetchTopics()); 
    }, 
    fetchTopicArticles: topic => { 
     dispatch(actions.fetchTopicArticles(topic)); 
    }, 
    fetchArticleById: id => { 
     dispatch(actions.fetchArticleById(id)); 
    } 
    }; 
} 

function mapStateToProps (state) { 
    return { 
    articles: state.articles.data, 
    article: state.article, 
    topics: state.topics.data, 
    loading: state.loading 
    }; 
} 

AppContainer.propTypes = { 
    articles: PropTypes.array.isRequired, 
    topics: PropTypes.array.isRequired, 
    loading: PropTypes.bool, 
    fetchArticles: PropTypes.func.isRequired, 
    fetchTopics: PropTypes.func.isRequired, 
    fetchTopicArticles: PropTypes.func.isRequired, 
    fetchArticleById: PropTypes.func.isRequired 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer); 

Answer 1

コードにいくつかの問題があります。

が

1）あなたは<Route path="/articles/:article_id" component={ArticleSingle} />を考えてみましょう - ArticleSingle Componenetでarticle_idにアクセスするには、これはあなたのルートです）props.match.params.article_id

2を使用する必要があります：あなたが訪問基本的

<Route path="/" component={AppContainer} /> 
<Route path="/" component={Home} /> 
<Route path="/topics/:topic_name/articles" component={Home} /> 
<Route path="/articles/:article_id" component={ArticleSingle} /> 

/記事/記事あなたは最初のルート<Route path="/" component={AppContainer} />に合っていて、あなたはそれに入っています。 この問題を解決するには、

A.最初の2つのルートでexactを使用します。それは<Route exact path="/" component={AppContainer} />と<Route exact path="/" component={Home} />

B.変更ごルートの順序とが、次のような底のホームページのルートのようになります。上記の解決策については

<Route path="/topics/:topic_name/articles" component={Home} /> 
<Route path="/articles/:article_id" component={ArticleSingle} /> 
<Route path="/" component={AppContainer} /> 
<Route path="/" component={Home} /> 

、私はあなたがルータを反応させるの使用していると仮定しています4.私はこのチュートリアルからあなたに提供した情報を得ました： https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf