首页 文章

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

提问于
浏览 次
2

看看this video反应路由器似乎很容易使用，但我找不到如何在我的代码中导航，因为我想链接点击一个div而不是使用 <Link> .

我've search StackOverflow but haven'找到了任何适用于4.0的答案 . 尝试导入browserHistory从this question给出undefined（在'react-router-dom'之外和之后安装'react-router'之前和之后）：

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

我还看到某个地方有一个“上下文”你可以得到，但这显示了'匹配'但不是'上下文'的值：

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

Edit

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

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

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

react-router react-router-v4

3 回答

  • 3

    如果我理解你的问题，这就是你如何 Build 一个链接 .

    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")
    );
    回复于
  • 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')
);

    之前我在 <Router> 内部 <App/> 并且无法访问这些属性 .

    回复于
  • 0

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

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

相关问题