通过侧边栏浏览反应路由器 - 在路由器上下文之外呈现的<link />无法导航

Question

我正在使用打字稿和反应路由器进行导航。这是我的启动文件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")
        );
    });
}

反过来导致渲染App组件（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>);
    }
}

我的侧边栏组件看起来像这个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>

        );
    }
}

问题在于，当我尝试点击侧边栏中的AddTodo链接时，它会向我显示以下错误。据我所知，我仍然处于相同的路由器环境下，那么为什么它抱怨链接不在同一个上下文中。我该怎么做才能摆脱这种局面。任何人都可以给我一些解决这个问题的解决方案吗？

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)