React Router 中的重定向
簡介
如果您是開發任何現代 Web 應用程序的開發人員，您可能知道正確設置路由的重要性。當您瀏覽許多 React Router 教程時，您可能會注意到它們很少提及重定向，而是專注於如何使用 Link 零件。要在 React 中管理路由，我們可以使用 react-router-dom 包。
先決條件
在本文中，我們將使用 react-router-dom 包，我們必須在我們的項目中安裝它。這是通過在我們的終端中運行以下命令之一來完成的：
$ npm i react-router-dom
或
$ yarn add react-router-dom
重定向和導航組件
Redirect react-router-dom 以前的版本中通常使用組件 只需從 react-router-dom 導入組件即可快速執行重定向的包 然後通過提供 to 來使用該組件 prop，傳遞你想要重定向到的頁面。
import { Redirect } from 'react-router-dom';
<Route path='/redirect-page' element={ <Redirect to="/error-page" /> }/>
隨著 React Router v6 的發布，Redirect 組件被移除並替換為 Navigate 組件，就像 Redirect 組件通過接收 to 使您能夠重定向到您指定的頁面的道具。
import { Navigate } from 'react-router-dom';
<Route path="/redirect" element={ <Navigate to="/error-page" /> } />
確保您已經擁有路線 .例如，如果您要重定向到“/error-page”路由，請確保您已經在 before 之前聲明了該路由 設置重定向。記下訂單或Route 下面代碼中的聲明：
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ErrorPage from './ErrorPage';
import Home from './Home';
function App() {
return (
<BrowserRouter>
<Routes>
<Route
path="/"
element={ <Home /> }
/>
{/* The next line is very important for the Navigate component to work */}
<Route
path="/error-page"
element={ <ErrorPage /> }
/>
<Route
path="/redirect"
element={ <Navigate to="/error-page" /> }
/>
</Routes>
</BrowserRouter>
);
}
export default App;
條件重定向
這是您在構建 Web 應用程序時可能需要使用的東西。條件重定向只是基於某些標準的路由。一個常見的場景可能是您正在構建一個電子商務平台，並且您不希望用戶能夠訪問某些組件/模式/表單，例如結帳模式/組件，直到他們將一些產品添加到購物車。如果他們試圖強行進入頁面，他們應該被重定向到產品頁面，以便他們可以首先選擇項目。
這稱為條件重定向。為此，我們將使用 useState() 鉤子清空購物車數組，然後將一些條件應用於我們的路線。
const [cartItems, setCartItems] = useState([]);
<Route
path="/checkout"
element={ cartItems.length < 1 ? <Navigate to="/products" /> : <Checkout /> }
/>;
在這個例子中，只要這個數組是空的，我們就不能訪問 /checkout 路由直到 cartItems 中至少有一項 數組。
替換當前網址
在某些情況下，您可能希望替換瀏覽器中的當前 URL，而不是將其添加（即推送）到瀏覽器的歷史記錄中，為此我們只需添加 replace Navigate 的道具 組件。
<Navigate replace to="/error-page" />
如果沒有這個道具，瀏覽器將跟踪歷史記錄，包括重定向。
使用 useNavigate() 的程序化重定向
你可能熟悉 useHistory() react-router-dom 以前版本的鉤子 包，用於以編程方式重定向用戶。當訪問者填寫完表單，或者如果您想為按鈕添加重定向功能時，這是一個很好的用例。
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
useHistory() 鉤子首先被導入，然後分配給一個變量，隨後在一個按鈕中使用該變量（例如）在執行特定操作後重定向用戶。使用 onClick 事件，然後我們可以調用 .push() 方法告訴 React Router 我們希望按鈕重定向到哪裡。
import { useHistory } from 'react-router-dom';
const Home = () => {
const history = useHistory();
return (
{/* ... */}
<button onClick={() => history.push('/products')}>
{/* ... */}
);
};
隨著 React Router v6 的發布，我們不再使用 useHistory() 鉤子，而是 useNavigate() 鉤子，很相似。
這也可以通過導入鉤子然後將變量分配給 useNavigate() 來完成 鉤子，就像我們對 useHistory() 所做的那樣 .我們現在可以利用返回的變量將用戶導航到其他頁面。
import { useNavigate } from 'react-router-dom';
const Home = () => {
const navigate = useNavigate();
return (
{/* ... */}
<button onClick={() => navigate('/products')}>
{/* ... */}
);
};
注意： 不同於 useHistory() 鉤子，這不需要調用 push 方法。我們需要做的就是將路徑作為參數傳遞給 navigate 功能。
結論
在這篇文章中，我們研究了使用 React Router 進行重定向的多種方法，它是如何工作的，以及在舊版本和最新的 v6 版本中是如何處理的。
