Link组件用于取代<a>元素,生成一个链接,允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本,可以接收Router的状态。

使用时需要先引用组件

  1. import { Link } from 'react-router-dom'

写入跳转地址

  1. <Link exact to="/about">About</Link>
  2. //to:(string)链接到的路径名或位置
  3. //exact 严格匹配

可以to一个location对象

  1. <Link to={ {
  2. pathname: '/courses',
  3. //URL的路径
  4. search: '?sort=name',
  5. //URL查询字符串
  6. hash: '#the-hash',
  7. //URL哈希片段
  8. state: { fromDashboard: true }
  9. // state使用时作为一个对象,可以设置位置特定的状态
  10. //对象内可以自己写内容。
  11. } }/>

<NavLink>是可以添加样式的 Link

  1. <NavLink
  2. to="/faq"
  3. activeClassName="selected"
  4. >FAQs</NavLink>
  1. <NavLink
  2. to="/faq"
  3. activeStyle={ {
  4. fontWeight: 'bold',
  5. color: 'red'
  6. } }
  7. >FAQs</NavLink>

Redirect

Redirect(重定向): 渲染时将导航到一个新地址,这个新地址覆盖在访问历史信息里面的本该访问的那个地址。

  1. <Switch>
  2. <Redirect from='/old-path' to='/new-path'/>
  3. //from 原来的地址
  4. //to 需要跳转的地址
  5. <Route path='/new-path' component={Place}/>
  6. </Switch>