如何根據登入狀態在 React Router 中以程式設計方式導航？

使用react-router以程式設計方式導覽

建立Web應用程式時，通常需要根據某些條件更改路線。在這個特定場景中，目標是根據使用者是否登入動態來變更路由。

使用 withRouter 和 History.push 的解決方案

對於 React Router v4，一種方法是使用 withRouter 包裝組件並利用 History.push 屬性以程式設計方式導覽。當組件未直接連接到路由器時，建議這樣做。

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }
  render() {
    return <Login />;
  }
}
export default withRouter(App);

使用重定向的解決方案

另一種方法是利用重定向元件。此選項的工作原理是根據條件立即重定向到特定路徑。

import { withRouter } from 'react-router';

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      return <Redirect to="/home" />;
    }
    return <Login />;
  }
}
export default withRouter(App);

React Router v2 或v3 的解決方案

對於React Router v2 或v3，上下文可用於動態地更改路由：

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    return <Login />;
  }
}
App.contextTypes = {
  router: React.PropTypes.object.isRequired
};
export default App;

React Router 的附加解決方案v3

此外，對於React Router v3，可以匯入browserHistory模組來實現編程式導航：

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

透過實現這些解決方案，您可以根據特定條件在React Router中動態導航並透過確保載入和顯示正確的元件來增強用戶體驗。

以上是如何根據登入狀態在 React Router 中以程式設計方式導航？的詳細內容。更多資訊請關注PHP中文網其他相關文章！