Navigating through react router through sidebar -- s rendered outside of a router context cannot navigate

Question

I am using typescript and react router for navigation . And here is my start up file index.tsx

---- Other declarations 


if (module && module.hot) {
    module.hot.accept('./app.tsx', () => {
        ReactDOM.render(
            <AppContainer>
                <Router history={browserHistory}>
                  <Route path="/" component={App}>
                    <Route path="todo" components={{ main: AddTodo, sidebar: SidebarNav }}>
                      <Route path="add" component={AddTodo} />
                      <Route path="completed" component={CompletedTodos} />
                    </Route>
                  </Route>
                </Router>
            </AppContainer>,
            document.querySelector("#app")
        );
    });
}

In turn which results in rendering App Component ( App.tsx ) -

export class App extends React.Component < Children, any > {

    constructor(props: any) {
        super(props);
    }

    Click() {
        alert("This is awesome");
    }

    render(): JSX.Element {
        const { main, sidebar } = this.props;
        console.log(this.props);
        return (<div>
                <NavigationBar />
                <div className="row">
                    <div className="col s2 m2">
                        {sidebar || <SidebarNav/>}
                    </div>
                    <div className="col s10 m10">
                        {this.props.children}
                    </div>
                </div>
            </div>);
    }
}

And my sidebar component looks something like this sidebar.tsx -

export class SidebarNav extends React.Component < SidebarProps, any > {

    constructor(props: any) {
        super(props);
    }


    render() {
        return (
            <ul className="collapsible" data-collapsible="accordion">
                <li>
                    <div className="collapsible-header">
                        <i className="material-icons">filter_drama</i>Todo Actions
                    </div>
                    <div className="collapsible-body">
                        <ul className="collection">
                            <li className="collection-item">
                                <Link href='#' to={{ pathname: '/todo/add' }}>Add Todo</Link>
                            </li>
                            <li className="collection-item">
                                <Link href='#' to={{ pathname: '/todo/completed' }}>Completed Todo's</Link>
                            </li>                               
                        </ul>
                    </div>
                </li>                  
            </ul>

        );
    }
}

The issue is whenever I am trying to click the AddTodo link in the sidebar it shows me an error below . As far as I understand I am still under same router context, then why is it complaining about the links not being under same context . And what shall I do to get rid of this situation . Can anybody give me some solution / pointer to this issue ?

browser.js?9520:40 Uncaught Error: <Link>s rendered outside of a router context cannot navigate.
    at invariant (eval at <anonymous> (http://localhost:8888/main.bundle.js:2252:2), <anonymous>:40:15)
    at Object.handleClick (eval at <anonymous> (http://localhost:8888/main.bundle.js:2354:2), <anonymous>:103:79)
    at Object.ReactErrorUtils.invokeGuardedCallback (eval at <anonymous> (http://localhost:8888/main.bundle.js:1436:2), <anonymous>:70:16)
    at executeDispatch (eval at <anonymous> (http://localhost:8888/main.bundle.js:1430:2), <anonymous>:85:21)
    at Object.executeDispatchesInOrder (eval at <anonymous> (http://localhost:8888/main.bundle.js:1430:2), <anonymous>:108:5)
    at executeDispatchesAndRelease (eval at <anonymous> (http://localhost:8888/main.bundle.js:1424:2), <anonymous>:43:22)
    at executeDispatchesAndReleaseTopLevel (eval at <anonymous> (http://localhost:8888/main.bundle.js:1424:2), <anonymous>:54:10)
    at Array.forEach (native)
    at forEachAccumulated (eval at <anonymous> (http://localhost:8888/main.bundle.js:1448:2), <anonymous>:24:9)
    at Object.processEventQueue (eval at <anonymous> (http://localhost:8888/main.bundle.js:1424:2), <anonymous>:257:7)