使用react-router-dom 4.0在代码中导航？

Question

看这段视频，react路由器似乎很容易使用，但我找不到如何在我的代码中导航，因为我想在单击div时链接，而不是使用

我已经搜索了StackOverflow，但没有找到任何适用于4.0的答案。尝试导入浏览器历史给出未定义（之前和之后安装'react-router'除了'react-router-dom'）从这个问题：

import { browserHistory } from 'react-router';
console.log('browserHistory:', browserHistory);

我还看到了可以访问的“上下文”，但这显示了“匹配”的值，而不是“上下文”：

<Route path="/" render={({ match, context}) => {
    console.log('match:', match);
    console.log('context:', context);

编辑

在开发工具中，我可以看到“路由器”有一个历史属性，因此当我添加该属性时，我可以访问它：

<Route path="/" render={({ match, context, history}) => {

有办法从路线外到达吗？例如，导航栏组件将导航到其他组件，但不在路由本身内...




Answer 1

你为什么不把你的div包在链接中，而不是试图绕过它，让你的生活更轻松？

    <Link to="/" >
       <div className="to-component">go to component</div>
    </Link>

Answer 2

我必须更多地阅读文档。历史记录对象仅使用路由上的组件（或其他）属性作为属性传递。显然需要包含“历史记录”包，并使用createBrowserHistory将其传递给路由器，然后在路由中指定组件。我认为这应该可以很好地工作，因为没有指定exact。。。

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactDOM.render( (
    <Router history={ history }>
      <Route path="/" component={ App } />
    </Router>
  ),
  document.getElementById('root')
);

在我有之前

Answer 3

如果我理解你的问题，这就是你如何制作链接编程。

    class Test extends React.Component {

      handleClick() {
        console.log(this.context);
        this.context.router.history.push('/some/path');
      },

      render() {

        return (
          <div onClick={handleClick}>
            This is div.
          </div>
        )
      }
    }

    Test.contextTypes = {
      router: React.PropTypes.object.isRequired
    }

    ReactDOM.render(
      <Test />,
      document.getElementById("app")
    );