react-router-dom V6 路由传值及功能介绍

文章目录

• 前言
• 一、引入库文件
• 二、使用步骤
• • 1.首页引入Router
  • 2.创建路由集中管理文件
  • 3.在App中使用useRoutes
  • 4.在子页面中使用
  • 5.路由传值的方式
• 总结

---

前言

React-router-dom已经升级到最新版本V6,先简单介绍一下v6版本发生了哪些改变

---

一、引入库文件

引入最新的reac-router-dom

yarn

$ yarn add react-router-dom@6

npm

$ npm install react-router-dom@6

二、使用步骤

1.首页引入Router

我这里引入的是HashRouter，还有一种BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

2.创建路由集中管理文