react-router 与 react-router-dom 之间是什么关系?

当我们使用路由的时候,需要安装以下库

yarn add react-router // "react-router": "^6.3.0",
yarn add react-router-dom // "react-router-dom": "^6.3.0",
yarn add history // "history": "^5.3.0",

我们使用如下

...非关键代码省略

import React from 'react'
import { Navigate, Routes, Route } from 'react-router'
import { BrowserRouter as Router } from 'react-router-dom'
const AuthenticatedApp = () => {
  // const value: any = undefined
  return (
    <Container>
        <Router>
          <Routes>
            <Route path={'/projects'} element={<ProjectsScreen />} />
            <Route path={'/projects:projectId/*'} element={<Project />} />
          </Routes>
        </Router>
    </Container>
  )
}

此刻会有疑问?

1. 我们此刻 Link 为什么来自于 react-router-dom, 而不是 react-router?
2. react-router 与 react-router-dom 之间是什么关系?

  import { Link } from 'react-router-dom'
  
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (value, project) => {
        console.log('faith=============value, project', value, project)
        return <Link to={project.id}>{value}</Link>
      }
    }
  ]
  

react-router 和 react-router-dom 的关系,类似于 react 和 react-dom/react-native/react-vr...的关系.

react 和 react-dom 关系?

react 是一个核心的库,里面主要处理一些虚拟的\计算的逻辑,类似于我们组件的状态state怎么影响虚拟树,我们这次的虚拟树(workInProgress tree) 与上一次虚拟树(current tree)中间的diff,类似于这种逻辑都是在react中处理的,那么我们经过一系列的计算,得出的结果就会被 react-dom 消费, 为什么没有一开始就把它们结合在一起?因为 react-dom主要生活在浏览器的宿主环境下的,里面充满了dom操作,而且这些dom操作只能够在浏览器下运行, 但是react-native是需要在native环境,比如ios环境下运行的,来消费react计算的结果,那么react-vr也是同理,用来消费react的计算的结果.

为什么来自于 react-router-dom, 而不是 react-router?

那么通过上面的解释,react-router 与 react-router-dom 也是一样的,react-router主要管理我们的路由状态,比如 Routes Route 都是从 react-router引入的,他们在内存中只是一个变量,不停的计算此刻路由状态是怎样的,那么计算的结算就交给 react-router-dom 来消费, 或者来说也可以给 native环境来消费,这个就是react-router 与 react-router-dom之间的关系,那么此刻回到我们的问题,为什么Link要从react-router-dom中引入?因为 Link 最后被渲染的时候会被渲染成a标签,并且处理a标签的响应事件,这个就紧紧的和宿主环境,就是浏览器环境强关联的,所以需要从 react-router-dom 中引入.