2.React路由的使用 路由组件详讲

1.下载React路由

 yarn add react-router-dom@5
 //本次讲解的是react 5版本的路由

2.导入

import { BrowserRouter, Link, Route, NavLink, Switch, Redirect } from 'react-router-dom'
//这里的路由组件很多 我一个一个说

2.1BrowserRouter

//BrowserRouter：对比与vue的History 在react中咱们需要把他包裹index.js中render里面的app组件 
代码如下
ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>)

2.2 Link,Route，NavLink

//路由组件的链接 但是点击按钮的时候 没有颜色的切换
 <Link to='/home'>{mesObj.title}</Link>
//NavLink和link使用的一样 但是他切换点击的时候会有颜色 可以通过activeClassName指定他切换的颜色
<NavLink activeClassName='back' to='/home'></NavLink>
//用route接收  这里的Detail就是组件 你需要显示的组件
<Route path='/home' component={Detail}>

2.3 Switch

//Switch匹配到指定的路由之后，就不在往下查找
//使用方法 直接包裹路由
 <Switch>
   {/* 接收传递过来的params参数 */}
   <Route path='/home' component={Detail}>
   </Route>
 </Switch>

2.4 Redirect

//路由的重定向
 <Switch>
   <Route path='/home' component={Detail}>
   <Redirect to='/home/news'></Redirect>
 </Switch>