react-router-demo
react-router-dom在V6版本之后更換了很多的API名稱，在ant design mobile的TabBar配置中還是之前的舊版本，比如使用了switch組件等。我們在這里使用新版本的react-router-dom進行react移動端的配置
首先使用npm下載最新版的react-router-dom
然后在main.tsx文件中引入，并且使用MemoryRouter作為我們的路由方式
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import {MemoryRouter} from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<MemoryRouter>
<App />
</MemoryRouter>
</React.StrictMode>,
)
React Router支持以下一些常用的路由方式：BrowserRouter 在瀏覽器地址欄中存儲當(dāng)前位置，并使用瀏覽器內(nèi)置的歷史記錄棧進行導(dǎo)航。HashRouter：在路徑前加入#成為一個哈希值，Hash 模式的好處是不會因為刷新頁面而找不到對應(yīng)路徑；MemoryRouter：不存儲 history，路由過程保存在內(nèi)存中，適用于 React Native 這種非瀏覽器環(huán)境；NativeRouter：配合 React Native 使用，多用于移動端；StaticRouter：主要用于服務(wù)端渲染時。
在這里我們使用MemoryRouter作為我們的路由方式。使用該組件包裹了 App 組件，這樣來react-router-dom 的其他組件和 hooks 就可以正常工作。
接下來在App.tsx文件中引入以下組件和方法：
import { Routes,Route,useNavigate,useLocation } from 'react-router-dom'
其中
Routes是包裹在Route最外的組件，它將包含可以在頁面特定部分顯示的所有不同的路由，
Route則是具體的路由，Route 組件用于將應(yīng)用的位置映射到不同的 React 組件，包含path（組件路徑），element（路由對應(yīng)的組件）。
如果想要在所有 Route 都不匹配時就渲染 404 頁面，只需將 404 頁面對應(yīng)的 Route 的 path 設(shè)置為 *
在 React Router v6 以前，我們必須按照一定的順序來定義路由，以獲得準(zhǔn)確的渲染。在 v6 及之后的版本中，路由定義的順序無關(guān)緊要。在 v6 中，將
useNavigate是編程式導(dǎo)航
useLocation可以獲取當(dāng)前的URL
定義一個路由靜態(tài)文件
我們定義一個router.tsx靜態(tài)文件，用來定義我們的路由，這樣可以從主程序中剝離出來，方便隨時修改
import Home from "./views/Home"
import Me from "./views/Me"
import { AppOutline, UserOutline } from "antd-mobile-icons"
export const tabs = [
{
key: "/home",
title: "首頁",
icon: <AppOutline />,
element: <Home />,
},
{
key: "/me",
title: "我的",
icon: <UserOutline />,
element: <Me />,
},
]
這里暫時定義了兩個路由
然后我們在App.tsx中引入路由文件
import { tabs } from './router'
然后我們渲染路由組件
<Routes>
{tabs.map(item => (
<Route key={item.key} path={item.key} element={item.element} />
))}
<Route path="*" element={<div>404</div>} />
</Routes>
最后一個Route代表如果都沒有匹配到，則返回404界面
接著再使用TabBar組件定義路由導(dǎo)航
const pathname = useLocation().pathname
const navigate = useNavigate()
const setRouteActive = (value: string) => {
console.log(value)
navigate(value,{state:'1'})
}
<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
{tabs.map(item => (
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
))}
</TabBar>
現(xiàn)在頁面效果如圖所示
路由導(dǎo)航已經(jīng)實現(xiàn)了，但是樣式還不對，我們再結(jié)合Popup組件實現(xiàn)樣式。
在TabBar外側(cè)包裹Popup組件，如下：
<Popup visible={true} mask={false}>
<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
{tabs.map(item => (
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
))}
</TabBar>
</Popup>
visible設(shè)置為true，mask設(shè)置為false
這樣導(dǎo)航欄就來到最下邊，樣式實現(xiàn)。
最終完整代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-822225.html
import { Routes,Route,useNavigate,useLocation } from 'react-router-dom'
import { TabBar,Popup} from 'antd-mobile'
import { tabs } from './router'
import './App.css'
function App() {
const pathname = useLocation().pathname
const navigate = useNavigate()
const setRouteActive = (value: string) => {
console.log(value)
navigate(value,{state:'1'})
}
return (
<>
<Routes>
{tabs.map(item => (
<Route key={item.key} path={item.key} element={item.element} />
))}
<Route path="*" element={<div>404</div>} />
</Routes>
<Popup visible={true} mask={false}>
<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
{tabs.map(item => (
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
))}
</TabBar>
</Popup>
</>
)
}
export default App
文件結(jié)構(gòu)如下
文章來源地址http://www.zghlxwxcb.cn/news/detail-822225.html
到了這里，關(guān)于react-router-domV6.21.1版本結(jié)合ant design mobile的TabBar標(biāo)簽欄和Popup彈出層實現(xiàn)移動端路由配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
