2. React-Router的基本使用

《react-router-dom源碼揭祕》系列

1. Context - React跨組件訪問數據的利器
3. react-router-dom源碼揭祕 - BrowserRouter

今天再給你們帶來一篇翻譯文章。原文來自react-router-dom官網

這篇文章，是咱們react-router-dom源碼揭祕系列的第二篇文章。一樣是預備知識。

想看第一篇文章的客官請走這邊。Context - React跨組件訪問數據的利器

基本組件

React Router中有三類組件:

• router 組件（BrowserRouter，HashRouter）
• route matching 組件（Route，Switch）
• navigation 組件（Link）

使用react-router-dom以前，咱們須要在工程路徑下安裝這個包

npm install react-router-dom
複製代碼

安裝完成後，上面所列出的這些組件，咱們能夠經過react-router-dom獲得。

import { BrowserRouter, Route, Link } from "react-router-dom";
複製代碼

Routers

基於React Router的web應用，根組件應該是一個router組件（BrowserRouter，HashRouter）。 項目中，react-router-dom提供了和兩種路由。兩種路由都會建立一個history對象。若是咱們的應用有服務器響應web的請求，咱們一般使用<BrowserRouter>組件; 若是使用靜態文件服務器，則咱們應該使用<HashRouter>組件

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter> <App /> </BrowserRouter>,
  holder
);
複製代碼

路由匹配

react-router-dom中有兩個匹配路由的組件:<Route> 和 <Switch>.

import { Route, Switch } from "react-router-dom";
複製代碼

路由匹配是經過將<Route>組件的path屬性與當前的location的pathname進行比較來完成的。當一個<Route>匹配了，它所對應的組件內容將被渲染出來。 不匹配，則渲染null。若是一個<Route>沒有path屬性，他的組件對應內容將一直被渲染出來。

// 當 location = { pathname: '/about' }
<Route path='/about' component={About}/> // 路徑匹配成功，渲染 <About/>組件
<Route path='/contact' component={Contact}/> // 路徑不匹配，渲染 null
<Route component={Always}/> // 該組件沒有path屬性，其對應的<Always/>組件會一直渲染
複製代碼

咱們能夠在組件樹的任何位置放置<Route>組件。可是更常見的狀況是將幾個<Route>寫在一塊兒。<Switch>組件能夠用來將多個<Route>「包裹」在一塊兒。

多個組件在一塊兒使用時，並不強制要求使用<Switch>組件，可是使用<Switch>組件倒是很是便利的。<Switch>會迭代它下面的全部<Route>子組件，並只渲染第一個路徑匹配的<Route>。

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

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* 若是上面的Route的路徑都沒有匹配上，則 <NoMatch>被渲染，咱們能夠在此組件中返回404 */}
  <Route component={NoMatch} />
</Switch>
複製代碼

Route Rendering Props

<Route>匹配時所顯示的組件，有三種寫法：

• component
• render
• children

具體用法能夠參照<Route>文檔，這裏咱們先簡單介紹一下component和render兩種方法。

component

在使用<Route>時，若是咱們想渲染的內容已經有對應的組件，則能夠直接使用component的方法。例如：

<Route path="/user/:username" component={User} />;

function User({ match }) {
  return <h1>Hello {match.params.username}!</h1>;
}
複製代碼

render

render方法直接使用一個內聯函數來渲染內容。

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>
複製代碼

注意：

不要將component屬性設置爲一個函數，而後在其內部渲染組件。這樣會致使已經存在的組件被卸載，而後重寫建立一個新組件，而不是僅僅對組件進行更新。

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};
複製代碼

Navigation

React Router提供了一個組件用來在應用中添加link。當<Link>渲染時，一個<a>標籤在html頁面中被建立出來。

<Link to="/">Home</Link>
// <a href='/'>Home</a>
複製代碼

<NavLink>組件是一個特殊的<Link>組件。當它的path與當前location匹配時，能夠自定義其樣式來表示當前頁面位置。

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>
複製代碼

當須要頁面重定向時，咱們可使用<Redirect>組件。當一個<Redirect>組件被渲染時，頁面將被渲染到<Redirect>組件的to屬性指定的位置上。

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/> ) : ( <PublicHomePage/> ) )}/> 複製代碼