react router 6

-

2021年11月 react router 6 成为默认版本，npm安装时自动安装6版本

每次react router发布都会有3个版本

react-router ： 路由的核心库，提供了很多组件钩子

react-router-dom： 包含react-douter所有内容，并添加了一些专门用于DOM的组件，例如BrowserRouter

react-router-native： 包含react-douter所有内容，并添加了一些专门用于ReactNative的一些api，例如Nativerouter

react router 6版本与5版本有哪些改动？

1、内置组件的变化：移除<Switch> 新增Routers等

2、语法的变化：component={About} 变成 element={<About />}

3、新增多个hook：useParams、useNavigate、useMatch

4、官方声明推荐函数式组件

首先在入口文件index.js用BrowserRouter把App组件包裹住，代表用的是BrowserRouter

App.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
)

-