react路由的基础配置

首先第一步先安装

yarn add react-router-dom

在你的src目录下找到你的index.text文件夹

将你干刚刚下载好的插件引入进来

引入进来后双标签包裹你的App

在你的首页面进行引入  Routes Route 

import {Routes,Route} from "react-router-dom"

Routes要双标签包裹着你的Route

 <Routes>
      <Route path='/index' element={}></Route>
  </Routes>

Route组件有两个属性：path和component【v6以上版本改成了element】

path路由匹配 

element：是你要跳转的页面

如何点击进行路由跳转?

首先也是在你引入的组件react-router-dom当中引入Link或者是NavLink

import {Link, NavLink} from "react-router-dom"

如果不懂可以查看Link和NavLink的区别：react中的Link和NavLink的区别_react link navlink-CSDN博客https://blog.csdn.net/weixin_47164846/article/details/109036273

<NavLink to='/main'>我的</NavLink>
||
<Link to='/main'>我的</Link >

这样就实现路由的切换跳转