單擊博客文章最令人沮喪的事情之一是，當(dāng)您只需將答案放在頂部時(shí)，就必須滾動(dòng)瀏覽人們對(duì)事物的漫長(zhǎng)解釋。標(biāo)題中的操作方法如下：

<Router>
  <NavLink to="/homepage">Homepage</NavLink>
  <Route path="/homepage" render={props => 
  (<Homepage {...props} pieceOfState={this.state.pieceOfState}/>)
}/>
</Router>

路由器本身你可以放在任何你想放的地方，但它最有意義的是選擇一個(gè)相當(dāng)頂級(jí)的應(yīng)用程序部分，所以通常在你的渲染方法應(yīng)用程序.js文件。正如您在上面看到的，我們使用的NavLink指向這個(gè)特定站點(diǎn)或應(yīng)用程序的主頁(yè)，路徑是驅(qū)動(dòng)力，它將實(shí)際執(zhí)行渲染組件的工作。如果您不需要向組件傳遞任何狀態(tài)，您通常只會(huì)看到這樣的路由器：

 <Route path='/homepage' component={Homepage} />

但是在React中，傳遞狀態(tài)（或helper方法）是所有能量的來源——這就是React如此反應(yīng)的原因。因此，您需要使用第一個(gè)代碼段來獲得所需的功能。該代碼中的路由路徑使用render方法傳遞內(nèi)聯(lián)函數(shù)，內(nèi)聯(lián)函數(shù)將呈現(xiàn)主頁(yè)——您可能會(huì)想知道，為什么我們不能使用snippet#2中的常規(guī)組件方法傳遞內(nèi)聯(lián)函數(shù)并得到相同的結(jié)果？答案是，如果使用內(nèi)聯(lián)函數(shù)，每次狀態(tài)改變時(shí)，component方法都會(huì)卸載和重新裝載整個(gè)組件。這就產(chǎn)生了一個(gè)不必要的能源昂貴的程序，當(dāng)你可以只使用整潔的渲染方法，友好的React開發(fā)者打算讓你使用。

現(xiàn)在，這部分已經(jīng)過時(shí)了，下面是前面提到的其他有趣的事情。

有時(shí)，在用React編寫代碼時(shí)，很難保持代碼DRY。您可能會(huì)發(fā)現(xiàn)自己編寫this.state數(shù)次，同時(shí)將特定的狀態(tài)塊傳遞給所需的組件。一個(gè)有趣的小技巧，可以幫助避免該問題：您可以不指定部分就傳遞整個(gè)dang狀態(tài)?？雌饋硐襁@樣：

<Homepage state={this.state}/>

這很簡(jiǎn)單。這是相當(dāng)前衛(wèi)的嗎？無論如何，您都可以使用this.props.state.pieceOfState訪問該組件內(nèi)部的狀態(tài)塊。

活動(dòng)鏈接

樣式化鏈接，以便用戶在關(guān)聯(lián)頁(yè)面上時(shí)做出響應(yīng)從未如此簡(jiǎn)單。您可以簡(jiǎn)單地給NavLink一個(gè)activestyle類（以及您想出現(xiàn)的任何CSS），如下所示：

<NavLink to='/homepage' activeStyle={{fontWeight: "bold", color: 'blue'}}>Homepage</NavLink>

React將處理監(jiān)聽用戶所在的頁(yè)面。

渲染404

有時(shí)你的網(wǎng)站的用戶會(huì)變得任性，他們可能會(huì)猜到可用的路徑，所以他們只會(huì)鍵入路徑，期待看到它出現(xiàn)。React很好，它不會(huì)破壞你的網(wǎng)站，但不會(huì)告訴用戶頁(yè)面不存在。要呈現(xiàn)404，使用開關(guān)標(biāo)記對(duì)路由進(jìn)行分組非常有用。

<Switch>
    <Route path='/homepage' component={Homepage}/>
    <Route path='/profile' component={Profile}/>
    <Route path='/seaturtles' component={Seaturtles}/>
    <Route component={NoMatch}/>
</Switch>

在上面，組件“NoMatch”沒有給定路由，因此所有未定義的路由都將呈現(xiàn)該組件，您可以構(gòu)建該組件來呈現(xiàn)您希望404頁(yè)的任何外觀。你可以把任何東西放在那里。約翰尼·布拉沃的形象。一個(gè)鏈接到維基百科404的頁(yè)面。一個(gè)永不停歇的憲法滾動(dòng)循環(huán)。世界就是你的牡蠣。

重定向

直觀地說，如果您的用戶已登錄，您將不希望他們能夠?qū)Ш降健?登錄”頁(yè)面。但是，你也不想讓他們看到404頁(yè)。是時(shí)候?qū)嵤┲囟ㄏ蛄?。這是通過指定另一個(gè)到“/signin”的路由并向其提供呈現(xiàn)重定向的指令來實(shí)現(xiàn)的。觀察：

<Route path="/signin" render={()=> (<Redirect to='/search'/>)}/>

這段代碼使用與傳遞道具相同的渲染方法來顯示路線，但是沒有道具本身。匿名函數(shù)指向我們的重定向，我們可以指定我們希望用戶發(fā)送到的URL。

重要提示

您必須將任何和所有路由器元素導(dǎo)入到您打算使用它們的任何文件中。例如，要執(zhí)行本文中列出的所有操作，您需要導(dǎo)入文件頂部的適當(dāng)項(xiàng)：

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

謝謝您的閱讀，祝您生活愉快！