왜 react-router V4 구성 요소가로드되지 않습니까?

Question

나는 홈 구성 요소가이 그것의 내부는 :

{posts && posts.map(post => (
    <div key={post.id}> 
    <Link to="/test">{post.title}</Link> 
    </div> 
))} 
<Route path="/test" component={Test} /> 

이 내 app.js 내가 그것을 클릭 할 때 왜이 테스트가 작동하지

<Topnav />   
<Switch> 
    <Route exact path = '/' component={Home} /> 
    <Route path = '/posts/create' component={Postform} />   
</Switch> 

입니까? 그것은 URL을 이동하지만 테스트 구성 요소는 I AM TEST라고해야합니다! <Switch> 구성 요소 내부 대신 Home 내부

<Route path="/test" component={Test} /> 

:

class Test extends Component { 
    render() { 
    return (
     <div> 
     <h1>I AM TEST</h1> 
     </div> 
    ); 
    } 
} 

Answer 1

당신은 다음 줄을 추가해야한다.

Answer 2

귀하의 구성 요소는 반 직관적입니다. Home 구성 요소는 의 경우에만으로 렌더링되고 그 다음에 또 Route이 표시되어 결과적으로 /에 렌더링되지 않으므로 렌더링되지 않습니다. 대신 /test 구성 요소를 Switch 안에 넣고 에 넣어야합니다.

참고 : 그냥 다음 Home 구성 요소가 모든 URL에 렌더링 할 /에 대한 exact을 제거하여이 문제를 해결 할 수 없습니다.