北京网站制作net2006,常见的营销型网站,软件开发项目经理职责,乐云网站建设react-router-demo
react-router-dom在V6版本之后更换了很多的API名称#xff0c;在ant design mobile的TabBar配置中还是之前的旧版本#xff0c;比如使用了switch组件等。我们在这里使用新版本的react-router-dom进行react移动端的配置 首先使用npm下载最新版的react-rout…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-domReactDOM.createRoot(document.getElementById(root)!).render(React.StrictModeMemoryRouterApp //MemoryRouter/React.StrictMode,
)React Router支持以下一些常用的路由方式 BrowserRouter 在浏览器地址栏中存储当前位置并使用浏览器内置的历史记录栈进行导航。 HashRouter在路径前加入#成为一个哈希值Hash 模式的好处是不会因为刷新页面而找不到对应路径 MemoryRouter不存储 history路由过程保存在内存中适用于 React Native 这种非浏览器环境 NativeRouter配合 React Native 使用多用于移动端 StaticRouter主要用于服务端渲染时。
在这里我们使用MemoryRouter作为我们的路由方式。使用该组件包裹了 App 组件这样来react-router-dom 的其他组件和 hooks 就可以正常工作。
接下来在App.tsx文件中引入以下组件和方法
import { Routes,Route,useNavigate,useLocation } from react-router-dom其中 Routes是包裹在Route最外的组件它将包含可以在页面特定部分显示的所有不同的路由
Route则是具体的路由Route 组件用于将应用的位置映射到不同的 React 组件包含path组件路径element路由对应的组件。 如果想要在所有 Route 都不匹配时就渲染 404 页面只需将 404 页面对应的 Route 的 path 设置为 * 在 React Router v6 以前我们必须按照一定的顺序来定义路由以获得准确的渲染。在 v6 及之后的版本中路由定义的顺序无关紧要。在 v6 中将 组件替换为了 组件会优先选中更具体的路由。
useNavigate是编程式导航
useLocation可以获取当前的URL
定义一个路由静态文件
我们定义一个router.tsx静态文件用来定义我们的路由这样可以从主程序中剥离出来方便随时修改
import Home from ./views/Home
import Me from ./views/Meimport { AppOutline, UserOutline } from antd-mobile-iconsexport 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{div404/div} //Routes最后一个Route代表如果都没有匹配到则返回404界面 接着再使用TabBar组件定义路由导航
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现在页面效果如图所示
路由导航已经实现了但是样式还不对我们再结合Popup组件实现样式。 在TabBar外侧包裹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/Popupvisible设置为truemask设置为false 这样导航栏就来到最下边样式实现。 最终完整代码如下
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().pathnameconst 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{div404/div} //RoutesPopup 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
文件结构如下
