React 路由

一、基本使用

1.明确好界面中的导航区、展示区

2.导航区的a标签改为Link标签

<Link to="/xxxxx">Demo</Link>

3.展示区写Route标签进行路径的匹配

<Route path='/xxxx' component={Demo}/>

4 .< App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

二、路由组件和一般组件

三、Switch的使用

四、解决多级路径刷新页面样式丢失问题

五、路由的严格匹配和模糊匹配

六、Redirect的使用

相关推荐
Devlive 开源社区4 小时前
技术日报|推理RAG文档索引PageIndex登顶日增1374星,React视频工具Remotion二连冠进前二
前端·react.js·前端框架
CappuccinoRose5 小时前
React框架学习文档(二)
javascript·react.js·组件·redux·props·state·context api
冬奇Lab6 小时前
一天一个开源项目(第2篇):Remotion - 用 React 程序化创建视频
react.js·开源·音视频
Dragon Wu7 小时前
React Native KeyChain完整封装
前端·javascript·react native·react.js·前端框架
Easonmax16 小时前
零基础入门 React Native 鸿蒙跨平台开发:7——双向滚动表格实现
react native·react.js·harmonyos
Easonmax16 小时前
零基础入门 React Native 鸿蒙跨平台开发:6——竖向滚动表格实现
react native·react.js·harmonyos
Easonmax18 小时前
零基础入门 React Native 鸿蒙跨平台开发:8——固定表头和列的复杂表格
react native·react.js·harmonyos
Easonmax1 天前
零基础入门 React Native 鸿蒙跨平台开发:3——固定表头表格实现
react native·react.js·harmonyos
Easonmax1 天前
零基础入门 React Native 鸿蒙跨平台开发:9——表格数据动态加载与分页
react native·react.js·harmonyos