React Router 渲染两个组件而不是一个 [重复]答案

【问题标题】：React Router renders two components instead of one [duplicate]React Router 渲染两个组件而不是一个 [重复]
【发布时间】：2018-05-27 03:42:21
【问题描述】：

我正在尝试使用路径/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;

我真的不知道我做错了什么或者为什么会这样..

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您在路线中错过了“准确”：

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

【讨论】：