react中的路由简单了解

BrowserRouter/HashRouter路由的模式

我们一般会使用HashRouter（locahost:3000/#/about），BrowserRouter一刷新就出错（locahost:3000/about）

使用

以下是使用路由的时候引用的

import import {
   HashRouter as Router, Route , Switch ,Link , NavLink, Redirect} from 'react-router-dom'

Link 生成一个a标签，用来做页面跳转（组件传参）

<Link exact to="/about">【首页】</Link>
// exact 表示绝对匹配到
<Link to={
   "/about/id="+item.id}>【关于】</Link>

NavLink 使用方式跟Link用法一样，但检查元素会发下a链接里面多了class=“active”，可以根据class设置样式

 <NavLink exact to='/'>【首页】</NavLink>

Route 表示每一个路由对象

<Route exact path="/" component={
   Home}/>
// exact 表示绝对匹配到  component里面的在上面