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

Question

看着 this video 反应路由器似乎易于使用，但我找不到如何在我的代码中导航，因为我想 link 单击 div 和不使用 <Link>.

我搜索了 Whosebug，但没有找到任何适用于 4.0 的答案。尝试从 :

导入 browserHistory 未定义（除了 'react-router-dom' 安装 'react-router' 之前和之后）

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

我还看到某处有一个 'context' 可以到达，但这显示 'match' 的值而不是 'context':

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

编辑

在开发工具中我可以看到 "Router" 有一个历史记录属性，所以当我添加它时我可以得到它：

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

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

Answer 1

如果我理解你的问题，这就是你如何以编程方式制作 link。

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

Answer 2

不得不更多地阅读文档。 history 对象仅作为属性使用 Route 上的 component（或其他）属性传递。显然需要包含 'history' 包并使用 createBrowserHistory 并将其传递给 Router，然后在 Route 中指定组件。我认为这应该可以正常工作，因为未指定 exact...

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

之前我只有 <App/> 在 <Router> 中并且无法访问这些属性。

Answer 3

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

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

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

Navigate in code with react-router-dom 4.0?

react-router

react-router-v4