如何在不修改渲染函數的情況下以程式設計方式在 React Router 中導航？

使用React-Router 以程式設計方式導航

挑戰：

在你的React 應用程式中，你想若要以程式設計方式導覽至根據使用者登入狀態不同的路線。您不確定如何在不改變渲染函數的情況下實現此目的。

React-Router v4 的解決方案：

使用歷史物件：

用withRouter 包裝你的組件並利用props 中的History.push 方法。當您的元件接受路由屬性或未直接連結到路由器時，此方法非常有用。

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

使用重定向：

對於更簡單的場景，您可以使用 Redirect。

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

React-Router 的解決方案v2/v3:

使用路由器上下文：

使用路由器上下文：

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>包裝您的🎜>組件並存取路由器上下文以動態變更路由。

使用瀏覽器歷史記錄：

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

直接存取瀏覽器歷史記錄也可以觸發導覽。

以上是如何在不修改渲染函數的情況下以程式設計方式在 React Router 中導航？的詳細內容。更多資訊請關注PHP中文網其他相關文章！