使用<Route>组件

路由匹配是通过比较<Route>的 path 属性和当前地址的 pathname 来实现的。当一个<Route> 匹配成功的时候，它将渲染其内容，当他不匹配的时候就会渲染 null。没有路径的<Route>将始终被匹配。

// when location = { pathname: '/about' }
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
<Route component={Always}/>

结合使用<Switch>组件和<Route>组件

<Switch>用于将<Route>分组

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Switch>不是分组<Route>所必须的，但他通常很有用。一个<Switch>会遍历其所有的子<Route>元素，并渲染与当前地址匹配的第一个元素。

使用<Link>、<NavLink>、<Redirect>组件

<Link> 组件来在你的应用程序中创建链接，无论你在何处渲染一个<Link>，都会在应用程序的 HTML 中渲染锚a 标签

<Link to="/">Home</Link>
//相等于 <a href='/'>Home</a>
<Navlink>是一个特殊类型的<Link>，当它的 to 属性与当前地址匹配的时候，可以将其定义为"活跃的"

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="active">
  React
</NavLink>
// <a href='/react' className='active'>React</a>

当你想强制导航时，你可以渲染一个<Redirect>。当一个<Redirect>渲染的时候，将会使用它的to属性进行定向。

所有《每日一题》的 知识大纲索引脑图 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以点击文末的 “阅读原文” 快速跳转