路由环境集成

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

路由模块下载

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

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

路由使用

路由引入

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

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

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

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

创建路由

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

// index.js 项目入口文件
import React from 'react';//用于创建组件的
import ReactDOM from 'react-dom/client'; //用于渲染页面的
import App from './App.jsx'  

const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面的根元素
root.render(
        <App />
);

import React from 'react'

export default function Index() {
  return (
    <div>Index 首页</div>
  )
}

import React from 'react'

export default function Index() {
  return (
    <div>Des 详情页</div>
  )
}

// App.jsx
import React,{lazy} from 'react'
import {BrowserRouter as Router ,Routes,Route} from 'react-router-dom'
import First from './views/first/index.jsx'
const Des=lazy(()=>import('./views/des/index.jsx'))
export default function App() {
  return (
    <Router>
      <div>App</div>
      <Routes>
        <Route path='/first' element={<First></First>}></Route>
        <Route path='/des' element={<Des />}></Route>
      </Routes>
    </Router>
  )
}

<div>App</div>是页面一定会加载的内容，当网址匹配成功就会加载Route对应的element中的组件，网址匹配是做全等判断。同样存在星号路由时只要星号路由匹配了后面的网址就不会再进行匹配。

lazy(()=>import('./views/des/index.jsx'))

引入lazy，实现路由懒加载

可以在src目录中新建router目录用于存放路由文件，就可以统一管理路由和网页的结构组成一目了然。

ps：使用路由懒加载一定要使用<Suspense></Suspense>标签将组件包裹起来，否则会报错

// src/router/index.jsx
import React, { lazy,Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import First from '../views/first/index.jsx'
const Des = lazy(() => import('../views/des/index.jsx'))

export default function Index() {
    return (
        <div>
            <Router>
                <Routes>
                    <Route path='/first' element={<First></First>}></Route>
                    <Route path='/des' element={<Suspense><Des /></Suspense>}></Route>
                    <Route path='/*' element={<First />}></Route>
                </Routes>
            </Router>
        </div>
    )
}

// index.js 项目入口文件
import React from 'react';//用于创建组件的
import ReactDOM from 'react-dom/client'; //用于渲染页面的
import App from './App.jsx'  

const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面的根元素
root.render(
        <App />
);

// src/App.jsx
import React from 'react'
import Routerview from './router/index.jsx'
export default function App() {
  return (
    <div>
      <Routerview></Routerview>
    </div>
  )
}

// src/views/first/index.jsx
import React from 'react'

export default function Index() {
  return (
    <div>Index 首页</div>
  )
}

// src/views/des/index.jsx
import React from 'react'

export default function Index() {
  return (
    <div>Des 详情页</div>
  )
}

React 路由环境集成和使用

路由环境集成

路由模块下载

路由使用

路由引入

创建路由