react-router的使用

react-router的版本

react-router有三个版本：

react-router：服务端渲染使用
react-router-dom：浏览器端渲染使用（一般常使用这个）
react-router-native：React-native混合开发使用

路由环境集成

从版本的react-router6.x开始，路由彻底改变了，和以前的版本完全不兼容。react-router5还可以用于类组件，而react-router6版本只能用于函数组件且使用语法也发生了改变。

安装：

sh 复制代码

# ts开发需要下载模块"react-router-dom"和 "@types/react-router-dom"
下载指令：npm i --save react-router-dom @types/react-router-dom

# js开发只需下载模块"react-router-dom"
下载指令：npm i --save react-router-dom

React-router使用步骤

引入BroserRouter组件或者HashRouter组件来包裹要使用路由的根组件（BroserRouter组件和HashRouter组件相当于创建路由）
使用Routes组件，注册路由（Routes组件相当于注册路由的组件，类似于Vue中注册路由的数组）
使用Route组件，定义路由需要加载的组件（Route组件相当于注册的路由需要加载的组件，类似于Vue中注册路由数组中的对象）

路由引入

js 复制代码

import {  
    BrowserRouter as Router,
    HashRouter,
    Route, 
    Routes,
    Link,
    useNavigate,
    useParams,
    useLocation,
    Navigate
} from 'react-router-dom';

BrowserRouter太长，常常使用别名Router。as语法是import引入时将export具名导出的变量换一个标识符。

BrowserRouter代表的是history路由模式，HashRouter代表的是hash路由模式。

BrowserRouter和HashRouter在整个项目中这两个标签只用一次，子路由嵌套时不需要使用。

创建路由和注册路由

创建路由

js 复制代码

// main.jsx
import { createRoot } from 'react-dom/client' // 用于渲染页面的
import React from 'react' // 用于创建组件的
import { BrowserRouter as Router } from 'react-router-dom' // 引入路由
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
    <Router>
        <App />
    </Router>
)

使用BrowserRouter组件包裹的组件就可以使用history路由。Routes组件和Route组件只能在使用BrowserRouter组件或者HashRouter组件包裹的组件中的子组件中使用。

注册路由

js 复制代码

// App.jsx
import React from "react"
import { Routes, Route } from "react-router-dom"
import Home from "./Home.jsx"
import Shop from "./Shop.jsx"
export default function App() {
  return (
    <>
      <div>这是一个项目</div>
      <Routes>
        <Route path="/home" element={<Home></Home>}></Route>
        <Route path="/shop" element={<Shop></Shop>}></Route>
      </Routes>
    </>
  )
}

<div>这是一个项目</div>是页面一定会加载的内容，当网址匹配成功就会加载Route组件对应的element属性中的组件，网址匹配是做全等判断。如果存在星号路由，只要星号路由匹配上了后面的网址就不会再进行匹配，星号路由可以匹配任意网址。

BrowserRouter组件或者HashRouter组件中嵌套Routes组件，相当于注册路由，类似于Vue中注册路由的数组。Routes组件中嵌套Route组件，相当于注册的路由需要加载的组件，类似于Vue中注册路由数组中的对象。

Route组件属性详情：

path属性：用于设置匹配到的路径
element属性：设置匹配到路径后要渲染的组件，这个属性是要一个组件，所以引入的方法需要加一个<>尖括号才是一个组件。

React的全局插件使用方式

React中没有Vue那样的vue.use方法，React中使用一个插件或者库，都是引入一个组件，然后把要使用该插件的部分用引入的组件包裹起来。