使用react-router-dom 4.0浏览代码？

看着this video反应路由器似乎易于使用，但我找不到如何在我的代码中导航，因为我想点击一个div链接，而不是使用<Link>。使用react-router-dom 4.0浏览代码？

我已经搜索了StackOverflow，但还没有找到任何与4.0一起使用的答案。尝试导入browserHistory给出不确定的（之前和安装除了“反应路由器”后“反应路由器-DOM”）从this question：

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

我也看到的地方，有一个“语境”，你可以拿地，但是这显示了“匹配”，但不是“语境”的值：

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

编辑

在开发者工具，我可以看到，“路由器”有一个HIST ory财产，所以当我补充说，我可以得到它：

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

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

来源

2017-03-28 Jason Goemaat

初始化你自己的历史，并呼吁history.push https://www.npmjs.com/package/history，也不要忘记使用这段历史在你 –

不得不阅读文档更多。 history对象仅在Route上使用component（或其他）属性作为属性传递。显然需要包含“历史记录”包并使用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>，并没有获得这些属性。

来源

2017-03-29 05:57:39

如果我理解您的问题，这是您如何制作链接程序设计。

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

来源

2017-03-29 00:23:45 ingenuine

哪里“语境”从何而来？我没有在我的'App'组件的反应开发工具中看到它，但是当我登录它时，我在控制台中看到一个空对象。 –

嗯...'this.context'对我来说是未定义的......组件是否必须位于''或其他内部？ –

@JasonGoemaat this.context通过向组件添加contextTypes来设置： 'Test.contextTypes = { router：React.PropTypes.object.isRequired } – Meldon

使用react-router-dom 4.0浏览代码？

回答

相关问题