React-router

使用React构建单页面应用，要想实现页面间的跳转，首先想到的就是使用路由
下载：
npm install react-router-dom
//或者
yarn add react-router-dom

路由组件：
BrowserRouter

BrowserRouter:
为一个容器，用来放Route,Link

导入（引入）路由组件：
import {BrowserRouter,Router,Route,Link} from "react-router-dom"

 使用：
<BrowserRouter>
    <Routes>
       // Route相当于vue中的router-view：要渲染展示在哪里
       // Link相当于 vue中的router-link:要到哪里去
       <Route path='/index' element={<Index />} />
       <Route path='/demo' element={<Demo/>} />
    </Routes>
</BrowserRouter>

注： 在react里使用类名属性：className，因为class在react里是类的关键字

a标签：
<a></a>==><Link to="/home"></Link> 跳转到首页

需要将跳转，做路由配置的页面用BrowserRouter包裹起来
<BrowserRouter>
    ....
    // 页面内容
     <Link to="/home"></Link>
     ...
     <Link to="/department"></Link>
     ...
      <Link to="/search"></Link>
     ...
</BrowserRouter>

当我点击对应的跳转时，url也跟着变:
url: localhost:3000/search
     localhost:3000/home
     localhost:3000/department

渲染：需要和跳转的路径进行匹配，to=>path,渲染路由信息
<BrowserRouter>
    <Routes>
       <Route path='/search' element={<Search/>} />
       <Route path='/home' element={<Home/>} />
       <Route path='/department' element={<Department/>} />
    </Routes>
</BrowserRouter>

to是匹配这个地址
path就是这个地址

匹配到这个地址之后，我们需要渲染的组件通过什么来展示：
element

那我具体渲染的组件是那个呢？
element = {<Add />}

那我渲染的组件在那呢？
我们需要提前将它导入进来 import Search form "./project/Search"

路由跳转：Link组件，NavLink组件
一致：功能都是跳转
区别：NavLink组件的style或者是class属性可以接收一个函数，
而函数可以接受一个isActive参数，isActive可以调整样式

//实现导航菜单切换的样式：
<NavLink to='/home' className={({isActive})=>{isActive?'selected':''}}></NavLink>