React 組件重定向(redirect)

React 組件重定向(redirect)是一個很有用的功能，它可以讓你在應用程式中重新導向到另一個頁面。它可以用於處理用戶請求，例如重新導向到登入頁面，或者在應用程式中跳轉到另一個頁面。

React 組件重定向(redirect)是一個很簡單的功能，只需要在你的 React 組件中使用 <Redirect> 標籤即可。

<Redirect
  to={{
    pathname: '/login',
    state: { from: props.location }
  }}
/>

<Redirect> 標籤會將用戶重新導向到指定的路徑，並且可以傳遞一些參數，例如 state 參數，可以用於傳遞一些資料，例如用戶的登入資訊。

另外，你也可以使用 <Switch> 標籤來控制 React 組件重定向(redirect)的行為，它可以讓你指定多個重定向路徑，並且可以指定哪個路徑會被執行。

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/login">
    <Login />
  </Route>
  <Redirect to="/login" />
</Switch>

上面的程式碼會先檢查 / 路徑，如果用戶請求的是 / 路徑，則會執行 <Home> 組件，如果用戶請求的是 /login 路徑，則會執行 <Login> 組件，如果用戶請求的是其他路徑，則會重新導向到 /login 路徑。

React 組件重定向(redirect)是一個很有用的功能，可以讓你在應用程式中更容易地重新導向到另一個頁面，並且可以更容易地控制重定向的行為。

推薦閱讀文章

How to Implement a Redirect in React Router
How to Pass Props to a React Component
React Router & React Router DOM Introduction
Getting Started with React Router
React Router Redirect Component</a

延伸閱讀本站文章

更多rect相關文章

推薦學習youtube影片