使用<Route>組件

路由匹配是通過比較<Route>的 path 屬性和當(dāng)前地址的 pathname 來實(shí)現(xiàn)的。當(dāng)一個(gè)<Route> 匹配成功的時(shí)候，它將渲染其內(nèi)容，當(dāng)他不匹配的時(shí)候就會(huì)渲染 null。沒有路徑的<Route>將始終被匹配。

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

結(jié)合使用<Switch>組件和<Route>組件

<Switch>用于將<Route>分組

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

<Switch>不是分組<Route>所必須的，但他通常很有用。一個(gè)<Switch>會(huì)遍歷其所有的子<Route>元素，并渲染與當(dāng)前地址匹配的第一個(gè)元素。

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

<Link> 組件來在你的應(yīng)用程序中創(chuàng)建鏈接，無論你在何處渲染一個(gè)<Link>，都會(huì)在應(yīng)用程序的 HTML 中渲染錨a 標(biāo)簽

<Link to="/">Home</Link>
//相等于 <a href='/'>Home</a>
<Navlink>是一個(gè)特殊類型的<Link>，當(dāng)它的 to 屬性與當(dāng)前地址匹配的時(shí)候，可以將其定義為"活躍的"

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

當(dāng)你想強(qiáng)制導(dǎo)航時(shí)，你可以渲染一個(gè)<Redirect>。當(dāng)一個(gè)<Redirect>渲染的時(shí)候，將會(huì)使用它的to屬性進(jìn)行定向。

所有《每日一題》的 知識(shí)大綱索引腦圖 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以點(diǎn)擊文末的 “閱讀原文” 快速跳轉(zhuǎn)