如何使用React的路由器v4 history.push（）

注意：我對React和Meteor相當陌生，所以請在回答我的問題時非常具體。如何使用React的路由器v4 history.push（）

我正在嘗試製作一個使用流星的短信應用程序，但是，我正在使用的教程是使用React v3，我想知道如何在v4中使用browserHistory.push（）來做同樣的事情。或browserHistory.replace（）將用戶發送到另一個頁面。到目前爲止，我正在做一個頁面，他們可以將他們的名字設置爲任何他們想要的，然後將它們鏈接到聊天頁面。我知道這裏有大量的文章和文檔，但它們都是非常複雜的例子。如果可以的話，你能告訴我可以將某人重定向到另一個頁面的最基本的方法嗎？

SetName.js：

import React from "react"; 
import { BrowserRouter } from 'react-router-dom' 

export default class SetName extends React.Component{ 
    validateName(e){ 
     e.preventDefault(); 
     let name = this.refs.name.value; 
     if(name){ 
      console.log(name); 
     } 
     this.props.history.push('/asd') 
    } 
    render(){ 
     return(
      <div> 
       <form onSubmit={this.validateName.bind(this)}> 
        <h1>Enter a Name</h1> 
        <input ref="name" type="text"/> 
        <button>Go to Chat</button> 
       </form> 
      </div> 
     ) 
    } 
}

main.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Meteor} from "meteor/meteor"; 
import {Tracker} from "meteor/tracker"; 
import { BrowserRouter, Route, Switch } from 'react-router-dom' 

import {Texts} from "./../imports/api/Text"; 
import App from "./../imports/ui/App"; 
import Name from "./../imports/ui/Name"; 
import NotFound from "./../imports/ui/NotFound"; 
import SetName from "./../imports/ui/SetName"; 

Meteor.startup(() => { 
    Tracker.autorun(() => { 
     let texts = Texts.find().fetch(); 
     const routes = (
      <BrowserRouter> 
       <Switch> 
        <App path="/chat" texts={texts}/> 
        <SetName path="/setName" /> 
        <Route component={NotFound}/> 
       </Switch> 
      </BrowserRouter> 
     ); 
     ReactDOM.render(routes, document.getElementById("app")); 
    }); 
});

來源

2017-08-14 Stuart Fong

如果您已經使用反應路由器4，那麼你可以簡單地執行以下命令獲取路由器的歷史在你的組件中。確保你在路由器中渲染你的組件，否則你必須以不同的方式進行。你可以通過在你的組件中打印this.props 來檢查它。如果它有歷史記錄，則執行以下操作，否則請從下面執行下一個邏輯。

this.props.history.push('your routing location').

如果你的組件是不是路由器裏面，然後執行以下操作

import { withRouter } from 'react-router'; 

... your react component 

export default withRouter(yourcomponent);

這種方式注入路由器歷史在你的組件作爲道具。

來源

2017-08-14 01:33:44

當我這樣做時，我得到一個錯誤，「未捕獲的TypeError：無法讀取未定義的屬性'推''我添加了我的main.js文件上面，所以你可以檢查出來。 –

將validateName（e）{}更改爲validateName =（e）=> {}，以便它可以訪問此關鍵字的類級別，否則它只會在函數內處理這個問題。 –

如何使用React的路由器v4 history.push（）

回答

相關問題