该说不说,在做这些之前,你要记得一件事
route不是react或者vue等原本就有的组件!需要你手动下载!然后导入!
原本的框架只是最终挂载到一个html界面上!!!
别再问我为啥你扒下来的代码为啥不好使了! 讨厌 > _<
下载指令去看我另一篇推文
今天复盘了一下自己的实训项目以及课程设计,两个东西混用了不同版本的route导致产生了很多混淆内容,今天在这边辨析一下,顺便说明v6版本中我们倾向于怎么做
1.Router -> BrowersRouter
首先就算Router被细化成了多个不同的东西,使用区别如下
<Router>
v5版本以前
</Router>
<BrowersRouter>
v6版本以后
</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 (
<div>
<Route 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)为每个条目添加跳转的点击事件即可