React Router渲染两个组件而不是一个组件

Question

我正在尝试使用路径/acts和/acts/lite呈现两个不同的组件。问题是，当我转到/acts/lite时，我会渲染两个组件，而不仅仅是与此路径对应的组件......

例如，当我导航到/acts时，我得到了这个：

当我导航到/acts/lite时，文字Test Acts仍在那里......

这是我的Router：

  <Router>
    <div>
      <App>
        <Route exact path="/login" component={LoginPage}/>
        <div className="flexible-width container">
          <Route path="/acts" component={requireAuth(ActsPage)} />
          <Route path="/acts/lite/" component={requireAuth(ActsLitePage)} />
        </div>
      </App>
    </div>
  </Router>

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>