react-router4.2使用js控制路由跳轉的3種方式

懶懶的技術宅發表於2018-03-22
ReactJS路由

一、背景

  • 在很多情況下，我們需要用js來控制頁面的路由切換，而不是通過Link標籤這種方式，比如有這樣一個場景，使用者要登陸一個網站才能看到網站裡面的內容，登入介面是一個獨立的子頁面，登陸成功後，才能進入網站瀏覽相關內容，使用react做SPA時就需要做路由的切換。

二、react-router4.2

  • 在網上隨處可見react-router入門使用方式，通過連結繫結元件實現跳轉，或者繫結hashHistory後，妄想在子元件中使用this.props.history.push(`/某路徑`)實現路由跳轉，誠然，在以前的版本是可行的，據說，反正我沒用過。而奇葩的4.2版本並不支援這種方式。我在網上看了許久，試了諸多辦法，任然無法通過上述方式實現js控制路由切換，emmm…

三、問題解決辦法

使用4.2裡面的Redirect標籤？元件？，不知道怎麼稱呼
具體如下：
先定義路由（表）：
import {
  BrowserRouter as Router,
  Route,
  Switch
} from `react-router-dom`;
 <Router >
      <div style={{height:`100%`}}>
      <Switch>
        <Route exact path="/" component={LoginPage}/>
        <Route path="/chat" component={Chat}/>
        <Route path="/home" component={Home}/>
        <Route path="/login" component={Login}/>
      </Switch>
      </div>
    </Router>)

方法一、在子元件裡使用
先要引入Redirect

   import { Redirect } from `react-router`;

 class Login extends React.Component {
    
    render() {
    const {isRegisterNewUser,loginSuccess}=this.props;
    const { getFieldDecorator} = this.props.form;
    if(loginSuccess){
      *return (<Redirect to="/chat" />);*
    }else{
     return(
     這裡放沒登陸之前的各種form表單
     )
    } 
    
  }
}

方法二、來自下面的大佬：靜對94
import PropTypes from `prop-types`;

static contextTypes = {

    router: PropTypes.object.isRequired,
}

console.log(this.context.router)

例如：

class Login extends React.Component {
        static contextTypes = {
            router: PropTypes.object.isRequired,
        }
        render() {
        const {isRegisterNewUser,loginSuccess}=this.props;
        const { getFieldDecorator} = this.props.form;
        if(loginSuccess){//登陸狀態變為成功
          this.context.router.history.push(`/chat)
        }else{
         return(
         這裡放沒登陸之前的各種form表單
         )
        } 
        
      }
    }

方法三、來自Inori_Lover 大佬推薦的官方文件：使用withRouter解決

import {withRouter } from `react-router`;
class Login extends React.Component {
            static contextTypes = {
                router: PropTypes.object.isRequired,
            }
            render() {
            const {isRegisterNewUser,loginSuccess，history}=this.props;
            const { getFieldDecorator} = this.props.form;
            if(loginSuccess){//登陸狀態變為成功
              this.props.history.push(`/chat)
            }else{
             return(
             這裡放沒登陸之前的各種form表單
             )
            } 
            
          }
        }
        ...
        
const Login=withRouter(connect(mapStateToProps,mapDispatchToProps)(TLogin))
export default Login;

如果你沒有使用redux，那麼你使用withRouter的正確姿勢應該是

const Login=withRouter(TLogin)
export default Login;

四、重點就是：

感謝各位大佬的指點，是我太浮躁，沒認真閱讀文件，以後一定多看。不管什麼方式，解決問題才是最重要的。

參考連線：stackoverflow

相關文章