[react基础]关于v6版本route的变化,以及常见应用模式

该说不说,在做这些之前,你要记得一件事

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)为每个条目添加跳转的点击事件即可