react-router-dom5如何升級(jí)到6
前言
升級(jí)前版本為5.1.2
下載與運(yùn)行
下載
npm install react-router-dom@6
運(yùn)行
運(yùn)行發(fā)現(xiàn)報(bào)錯(cuò)：
將node_modules刪除，重新執(zhí)行npm i即可
運(yùn)行發(fā)現(xiàn)如下報(bào)錯(cuò)：
這是因?yàn)橹坝幸胷eact-router-dom.min，v6中取消了該文件，所以未找到文件導(dǎo)致報(bào)錯(cuò)。
將引用變?yōu)閞eact-router-dom即可解決。
再次運(yùn)行發(fā)現(xiàn)如下報(bào)錯(cuò)：
這是因?yàn)閞eact-router-dom6取消了withRouter，如果想要獲取路由地址，需要使用useLocation
變?yōu)?/p>
再次運(yùn)行發(fā)現(xiàn)如下報(bào)錯(cuò)：
按照官網(wǎng)進(jìn)行如下修改：
Switch 被替換為 Routes
v5 時(shí)代的第一個(gè)被替代的是Switch組件。
該Switch組件用于包裝我們的路由，它確保每次只加載一個(gè)匹配的路由。
但這在 v6 中不再存在。我們使用Routes組件來(lái)替換Switch。
請(qǐng)注意，我們?nèi)匀恍枰獙?dǎo)入BrowserRouter包裝我們的應(yīng)用程序，就像在 v5 中所做的那樣。
在 v5 中，我們是這樣做：
import { BrowserRouter, Switch } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<div className="App">
<Switch>
{/* 路由Route在此定義 */}
</Switch>
</div>
</BrowserRouter>
);
}
export default App
但在 v6 中，我們將這樣做
import { BrowserRouter, Routes } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<div className="App">
<Routes>
{/* Switch 會(huì)被改成 Routes */}
{/* 路由Route在此定義 */}
</Routes>
</div>
</BrowserRouter>
);
}
export default App
注意：v5的Switch中可以包含非Route元素，但Routes中只能存在Route，否則會(huì)報(bào)錯(cuò)。
Route組件使用更新
盡管該Route組件在 v6 中仍然保留一個(gè)位置，但我們定義它的使用方式與我們?cè)?v5 中的方式不同。
我們將不再以 v5 中的任何方式放置我們想要渲染的組件，而是統(tǒng)一將其作為elementprop的值傳遞。
沒(méi)有exact配置
在 v5 中，不添加exact作為Route組件的props的話，如果 URL 以 path 關(guān)鍵字開(kāi)頭，則路徑將匹配，因?yàn)槠ヅ溥^(guò)程是從上到下的順序。
但在 v6 中，我們將不再需要該exact配置，因?yàn)槁窂侥Ｊ狡ヅ渌惴ㄒ迅?，并且現(xiàn)在更加增強(qiáng)。
在 v5 中，我們這樣做了：
<Switch>
{/* 三種Route組件使用定義 */}
<Route path="/signup" component={Product} />
{/* 或 */}
{/* 這個(gè)方法允許我們將 props 傳遞給渲染的組件 */}
<Route path="/games">
<Product id={2} />
</Route>
{/* 或是通過(guò)render函數(shù) */}
<Route path="/games" render={(props) => <Product {...props} />} />
</Switch>
在 v6 中，
<Routes>
{" "}
<Route path="/games" element={<Product />} />
{/* 帶有props的渲染組件 */}
<Route path="/movies" element={<Product id={200} category="shirt" />} />
</Routes>
Links 和 NavLinks
Link和NavLink組件仍然可以運(yùn)行在V6。Link組件使用與在 v5 的時(shí)候保持一樣，但使用NavLink組件時(shí)，刪除了activeClassName和activeStyle prop。在 v5 中，activeClassNameprop 用于在鏈接激活后自動(dòng)將一些 CSS 類(lèi)應(yīng)用于鏈接，同時(shí)activeStyle允許我們?cè)阪溄蛹せ顣r(shí)向鏈接添加內(nèi)部樣式。
但是在 v6 中，現(xiàn)在可以使用一個(gè)函數(shù)來(lái)獲取有關(guān)鏈接活動(dòng)狀態(tài)的信息。該函數(shù)的參數(shù)是一個(gè)具有屬性的對(duì)象isActive。此屬性在鏈接處于活動(dòng)狀態(tài)時(shí)為真，在非活動(dòng)時(shí)為假。isActive的值允許我們使用條件表達(dá)式來(lái)指示活動(dòng)樣式或類(lèi)名。
在 v5 中，
import {NavLink} from “react-router-dom”
{/* … */}
<NavLink
to="/product"
style={{ color: "#689" }}
activeStyle={{ color: "#3072c9" }}
className="nav_link"
activeClassName="active"
>
Products
</NavLink>
但在 v6 中，我們將這樣做：
<NavLink
to="/product"
style={({ isActive }) => ({ color: isActive ? "#3072c9" : "#689" })}
className={({ isActive }) => `link${isActive ? " active" : ""}`}
>
Product
</NavLink>
Navigate替代Redirect
在 v5 中，使用該Redirect組件將一個(gè)頁(yè)面帶到另一個(gè)頁(yè)面，但它不再?gòu)?v6 中的 react-router-dom 導(dǎo)出。它已被Navigate組件替換。
在 v5 中，
<Route path="/faq">
<Redirect to="/about" />
</Route>
<Route path="/about" component={About} />
但在 v6 中，
<Route path="/games" element={<Navigate to="/about" />} />;
<Route path="/games" element={<About />} />;
需要注意的是，如果只是按照Navigate上面代碼片段中的方式添加組件，它只會(huì)將導(dǎo)航到該路徑的導(dǎo)航推送到導(dǎo)航堆棧中，但是如果我們打算用新頁(yè)面替換當(dāng)前頁(yè)面，我們將 replace 屬性添加到Navigate組件中，如下所示：
<Route path="/games" element={<Navigate replace to="/about" />} />;嵌套路由
顧名思義，嵌套路由是放置在另一個(gè)路由中的路由。它們用于在子組件中呈現(xiàn)更具體的信息。在 v6 中，將嵌套路由放置為父路由的子路由。然后引入Outlet組件，它是從渲染組件中的 react-router-dom 導(dǎo)出的，用于指定希望嵌套信息顯示在哪里。Outlet 組件不是必需的，但它使代碼更清晰。
在 v5 中，
import { useRouteMatch } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/about" component={About} />
<Route path="/product" component={Product} />
</Switch>
</BrowserRouter>
);
}
function Product() {
let match = useRouteMatch();
return (
<div>
<Switch>
{/* match.path 返回父路由中指定的路徑。在這種情況下，它是“/product" */}
<Route path={`${match.path}`}>
<AllProducts />
</Route>
{/* 匹配 /product/:id */}
<Route path={`${match.path}/:id`}>
<ProductDetail />
</Route>
</Switch>
</div>
);
}
在 v6 中，
import { Outlet } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/about" element={<About />} />
<Route path="/product" element={<Product />}>
{/* 這里嵌套路由的路徑是相對(duì)于父路由的路徑的。 */}
{/* 這里變成 "/product/" */}
<Route path="/" element={<AllProducts />} />
{/* 這里變成 "/product/:id" */}
<Route path="/:id" element={<ProductDetail />} />
</Route>
</Routes>
);
}
function Product() {
return (
<Container>
<>
<div>Product</div>
{/* 父組件的其他內(nèi)容 */}
</>
{/* 這是嵌套信息開(kāi)始的地方 */}
<Outlet />
</Container>
);
}
useNavigate代替useHistory
當(dāng)用戶因路徑上發(fā)生的事件（例如單擊按鈕、API 請(qǐng)求完成等）而被重定向時(shí)，就會(huì)發(fā)生程序化導(dǎo)航。在 v5 中，可以使用useHistory鉤子來(lái)執(zhí)行以下操作：
import { useHistory } from "react-router-dom";
function Product() {
const history = useHistory();
const handleClick = () => {
//這會(huì)將新路線推送到導(dǎo)航堆棧的頂部
history.push("/new-route");
history.push({pathname:"/new-route",state:{p1:xxx}); // 傳參
//這會(huì)將當(dāng)前路線替換為導(dǎo)航堆棧中的新路由
history.replace("/new-route");
};
return (
<div>
<button>點(diǎn)擊我重定向到新路由</button>
</div>
);
}
但是在 v6 中，useHistoryhook 被替換為useNavigatehook，并且以不同的方式使用它。
import { useNavigate } from "react-router-dom";
function Product() {
const navigate = useNavigate();
const handleClick = () => {
//這會(huì)將新路線推送到導(dǎo)航堆棧的頂部
navigate("/new-route");
navigate("/new-route",{state:{p1:xxx}}); // 傳參
//這會(huì)將當(dāng)前路線替換為導(dǎo)航堆棧中的新路由
navigate("/new-route", { replace: true });
};
return (
<div>
<button>點(diǎn)擊我重定向到新路由</button>
</div>
);
}
一件很酷的事情是以在導(dǎo)航堆棧上任意前進(jìn)和后退。通過(guò)使用正數(shù)作為上述參數(shù)navigate()，路由會(huì)向前移動(dòng)該步數(shù)。負(fù)數(shù)向后做同樣的事情
// Goes forward navigate(1) // Goes forward twice navigate(2) // Goes backward navigate(-1) // Goes backward three times navigate(-3)
刪除Prompt組件
Prompt如果有未保存的更改，v5 中的組件可防止意外離開(kāi)頁(yè)面。但是 react-router 團(tuán)隊(duì)并沒(méi)有將它包含在 v6 中，也沒(méi)有替代方案。因此，如果你需要該功能，你可以手動(dòng)實(shí)現(xiàn)它或返回到 v5。
除了不包括Prompt在當(dāng)前版本（v6）中，useBlocker和usePrompt都不起作用。react-router 團(tuán)隊(duì)雖然在官方文檔中表示，他們目前正在努力將其添加回 v6，但不是針對(duì) 6.x 的第一個(gè)穩(wěn)定版本。
注意
react-router-dom5的Switch可以嵌套R(shí)edirect
但react-router-dom6的Routes中只可以存在Route和Route.Fragment
v5的Router寫(xiě)法，需要利用history
import { createBrowserHistory } from "history"
const customHistory = createBrowserHistory()
const Root = () => {
return (
<Router history={customHistory}>
......
</Router>
)
}
v6直接更改路由引入方式即可
import { BrowserRouter } from "react-router-dom"
const Root = () => {
return (
<BrowserRouter>
......
</BrowserRouter>
)
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React Hook用法示例詳解（6個(gè)常見(jiàn)hook）
這篇文章主要介紹了React Hook用法詳解（6個(gè)常見(jiàn)hook）,本文通過(guò)實(shí)例代碼給大家介紹了6個(gè)常見(jiàn)hook，需要的朋友可以參考下2021-04-04
react用Redux中央倉(cāng)庫(kù)實(shí)現(xiàn)一個(gè)todolist
這篇文章主要為大家詳細(xì)介紹了react用Redux中央倉(cāng)庫(kù)實(shí)現(xiàn)一個(gè)todolist，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
React函數(shù)組件傳參的實(shí)現(xiàn)
React函數(shù)組件通過(guò)接受props實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞,通過(guò)組件標(biāo)簽的屬性向子組件傳遞數(shù)據(jù),并在子組件中通過(guò)參數(shù)接收,還可以使用ES6的解構(gòu)賦值,函數(shù)也能作為props傳遞,以實(shí)現(xiàn)父子組件間的交互和通信,下面就來(lái)具體了解一下2024-09-09
React?Fiber?樹(shù)思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解
這篇文章主要為大家介紹了React?Fiber?樹(shù)思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
react?表單數(shù)據(jù)形式配置化設(shè)計(jì)
這篇文章主要介紹了react表單數(shù)據(jù)形式配置化設(shè)計(jì)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
使用React+SpringBoot開(kāi)發(fā)一個(gè)協(xié)同編輯的表格文檔實(shí)現(xiàn)步驟
隨著云計(jì)算和團(tuán)隊(duì)協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡(jiǎn)單的開(kāi)發(fā)一個(gè)協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了關(guān)于react 父子組件的執(zhí)行順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React?less?實(shí)現(xiàn)縱橫柱狀圖示例詳解
這篇文章主要介紹了React?less?實(shí)現(xiàn)縱橫柱狀圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09