React Routerは1つではなく2つのコンポーネントをレンダリングします

Question

/actsと/acts/liteの2つの異なるコンポーネントをレンダリングしようとしています。

：問題は、私は /acts/liteに行くとき、私は /actsに移動していたときに私はこれを取得、代わりにこのパスに対応して一つだけのレンダリングの両方のコンポーネント...例えば

を得るということです

：

この は私Routerある

そして、私は/acts/liteに移動していたときにテキストTest Actsはまだあります...

ActsPageコンポーネント：

class ActsPage extends React.Component { 

    render() { 
    return (
     <div> 
     Test Acts 
     </div> 
    ); 
    } 
} 

export default ActsPage; 

ActsLitePageコンポーネント：

class ActsLitePage extends React.Component { 

    render() { 
    return (
     <div> 
     Testing Acts Lite 
     </div> 
    ); 
    } 
} 

export default ActsLitePage; 

そして、これは、これら二つのリンクとサイドバーを示しコンポーネントです：

var Sidebar = React.createClass({ 
    render() { 
    var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar'; 
    return (
     <div className={sidebarClass}> 
     <div><Link to="/acts/">Acts</Link></div> 
     <div><Link to="/acts/lite/">Acts Lite</Link></div> 
     </div> 
    ); 
    } 
}); 

export default Sidebar; 

私は本当にしないでください私が間違ってやっていることを知っているか、それがこのように振る舞う理由...

Answer 1

あなたのルートに「正確」がない：

<Link exact to="/acts/">Acts</Link>