使用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瀏覽代碼？

回答

相關問題