I am trying to render two different components with the path /acts and /acts/lite. The problem is that when I go to /acts/lite I get both components rendered instead of just the one that correspond to this path...
For example, when I'm navigating to /acts I get this:
And when I'm navigating to /acts/lite the text Test Acts is still there...
This is my 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 Component:
class ActsPage extends React.Component {
render() {
return (
<div>
Test Acts
</div>
);
}
}
export default ActsPage;
ActsLitePage Component:
class ActsLitePage extends React.Component {
render() {
return (
<div>
Testing Acts Lite
</div>
);
}
}
export default ActsLitePage;
And this is the Component that shows the sidebar with those two links:
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;
I really don't know what I'm doing wrong or why it behaves like this..
