专业做网站建设设计,织梦网站制作教程,做网站 域名不属于,浏览器下载安装2022最新版该说不说,在做这些之前,你要记得一件事
route不是react或者vue等原本就有的组件!需要你手动下载!然后导入!
原本的框架只是最终挂载到一个html界面上!!!
别再问我为啥你扒下来的代码为啥不好使了! 讨厌 _ 下载指令去看我另一篇推文
今天复盘了一下自己的实训…该说不说,在做这些之前,你要记得一件事
route不是react或者vue等原本就有的组件!需要你手动下载!然后导入!
原本的框架只是最终挂载到一个html界面上!!!
别再问我为啥你扒下来的代码为啥不好使了! 讨厌 _ 下载指令去看我另一篇推文
今天复盘了一下自己的实训项目以及课程设计,两个东西混用了不同版本的route导致产生了很多混淆内容,今天在这边辨析一下,顺便说明v6版本中我们倾向于怎么做
1.Router - BrowersRouter
首先就算Router被细化成了多个不同的东西,使用区别如下
Routerv5版本以前
/RouterBrowersRouterv6版本以后
/BrowersRouter
一共被分成了:
BrowerRouter:适用于常见的web应用
HashRouter:适用于静态页面(url不太一样)
MemoryRouter:适用于服务器环境(一些根本用不到url的情况是这样的)
而原本的Router不能再使用了
2.Switch - Routes
其实除了改了名字以后其他没啥变化,只是承担具体路由的工具
(名字更加直白可懂了)
3.Route
对于每个基本路由来说,其实这个几乎没有改动,只要注意几点
1.path属性不是常见的对象或者jsx语法,只是一个字符串就行了 2.现在子组件内容有两种方法获取
element:这个属性允许你直接使用jsx语法去写dom标签 component:这个属性需要你直接输入一个组件对象,这个可以外部引入 至于link....我觉得属实是画蛇添足了 4.跳转的变化
其实有的时候我们偶然获取到一些项目,你会发现用v5里面仍然存在一些路由跳转的标签or属性,但是实际上有一些是作者自行封装的.
v5版本支持的仍然是原生js的路由跳转,即使用history对象,但是获取这个对象的方法和原生不一样
const history useHistory();//接下来再对history对象进行一些其他的操作
这个东西的用法和原生是一模一样的,虽然只是你手动获取命名的对象
但是再v6版本时候,这个路由跳转对象变了,使用方法也取消掉了原本history具有的功能,只剩跳转了
const navigate useNavigate();// 使用 navigate 函数进行路由跳转
navigate(/about);
现在这是获取一个路由跳转对象,或者说是函数,然后输入数值完成跳转 5.在react中的子路由偏好
刚开始学react的时候,我把子路由写成这样 报错了嘛?没有
能跑嘛?不能
咋回事?不知道
其实这就是典型的vue后遗症,总是想把路由全都托管到一起,组合在一个文件里面
但是react的子路由模式更倾向于,将子路由放在父组件内部自行管理,只是最后根据url决定显示哪些罢了.
在React Router中通常更倾向于将子路由的定义分离到各自的组件中以保持组件的独立性和可重用性。这意味着每个组件负责自己的子路由而不需要将所有路由配置都放在一个地方。这种方法更加模块化有助于更好地组织代码和维护路由结构。
在Vue中通常会使用嵌套路由将父子关系直观地表达在一个地方这对于某些场景可能更方便但也可能导致路由配置相对集中在一个文件中。
选择使用哪种方式取决于你的项目需求和个人偏好。React Router的方式更加分散适用于需要更灵活路由组织和组件独立性的场景。而Vue Router的方式更集中适用于需要直观表示嵌套关系的场景。无论你选择哪种方式都可以根据具体情况来决定如何组织你的路由结构。
举个例子
import { BrowserRouter as Router, Link, Route } from react-router-dom;//父组件
function ParentComponent() {return (divRoute path/parent/child1 component{ChildComponent1} /Route path/parent/child2 component{ChildComponent2} //div);
}//子组件
function ChildComponent1() {return h2子组件1内容/h2;
}//子组件
function ChildComponent2() {return h2子组件2内容/h2;
}//根组件
function App() {return (Router{/* 路由规则和组件的对应关系 */}Route path/parent component{ParentComponent} //Router);
}
另外这里要注意一个问题,子组件中要包含父组件的路由作为前缀! 所以我们经常可以见到工程中,会在根组件上加上一些基础路由 差不多这样子,后面有别的需求我再补充就是了 6.工程中的常见用法举例:(侧边栏路由导航)
(1)首先先单独封装一个路由对象的数组 (2)在你的侧边栏中使用map语句遍历,创建条目
(3)为每个条目添加跳转的点击事件即可
