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

Question

看着 this video react 路由器似乎易于使用，但我找不到如何在我的代码中导航，因为我想在单击 div 时进行链接而不是使用 <Link> .

我搜索了 StackOverflow，但没有找到任何适用于 4.0 的答案。尝试从 this question 导入 browserHistory 给出 undefined(在安装 '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}) => {

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

Answer 1

如果我理解您的问题，这就是您以编程方式创建链接的方式。

    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")
    );