react-router-dom 内置组件详解

BrowserRouter 和 HashRouter 的区别

假如要访问的路径为 localhost:3000/
则 使用 BrowserRouter 时地址栏显示 http://localhost:3000/
而 使用 HashRouter 时地址栏显示 http://localhost:3000/#/

Route 组件的 path 属性用于匹配路径，因为我们需要匹配 / 到 Home，匹配 /about 到 About，所以肯定需要两个 Route，但是，我们不能这么写。

<Route path='/' component={
     Home}/>
<Route path='/about' component={
     About}/>

Link 和 NavLink的区别

NavLink 时 Link的进阶

Link组件，会渲染一个a标签；

两者都是实现路由的跳转.但

点击时，url会更新，组件会被重新渲染，但是页面不会重新加载…使用to链接组件时,它的值既可是字符串，也可以是location对象（包含pathname、search、hash、与state属性）如果其值为字符串，将会被转换为location对象
点击时,会在匹配上当前的url的时候给已经渲染的元素添加参数.

 activeClassName="atguigu"

activeClassName 是 NavLink 特有的属性 用来控制 悬浮样式

.atguigu{
     
      background:fuchsia !important;
      color: white !important;
    }

不过必须将 样式设置 !important

效果：

NavLink与封装NavLink

1. NavLink可以实现路由链接的高亮，通过activeclassName指定样式名
2. 标签体内容是一个特殊的标签属性
3. 通过this.props.children可以获取标签体内容

Switch

当遇到符合条件的内容后直接跳出 不再进行判断

<Switch>
{
     /* 注册路由  */}
   <Route path="/about" component={
     About} />
   <Route path="/home" component={
     Login} />
   <Route path="/home" component={
     Home} />
 </Switch>

Switch的使用

1. 通常情况下，path和lcomponent是一一对应的关系。
2. Switch可以提高路由匹配效率(单一匹配)。