React-router v4使用步驟詳解

這次帶給大家React-router v4使用步驟詳解，React-router v4使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

也許學習react-router最好的方法就是用react-router-dom v4來寫一個多頁的react應用程式。這個react應用程式會包含登入、註冊、首頁、聯絡人等頁面。但是，首先讓我們來看看react router v4的概念，以及它與v3有什麼不同的地方。

React router v4 vs v3

v4是react router的一次重寫，所以和v3有很多不同的地方。主要有：

• 在react router v4裡，路由不再是集中在一起的。它成了應用程式佈局、UI的一部分。

• 瀏覽器用的router在react-router-dom#裡。所以，瀏覽器裡使用的時候只需要import react-router-dom就可以。

• 新的概念BrowerRouter和HashRouter。他們各自服務於不同的情境。詳見下文。

• 不在使用{props.children}來處理巢狀的路由。

• v4的路由預設不再排他，會有多個符合。而v3是預設排他的，只會有一個符合被使用。

react-router-dom是react-router中用來瀏覽器的。 react-router分成幾個部分：

• #react-router是瀏覽器和原生應用程式的通用部分。

• react-router-dom是用來瀏覽器的。

• react-router-native是用於原生應用的。

React-router vs react-router-dom vs react-router-native

react-router是核心部分。 react-router-dom提供了瀏覽器使用所需的客製化元件。 react-router-native則特別提供了在原生行動應用程式中需要用到的部分。所以，如果在本例中實作瀏覽器開發就只需要安裝react-router-dom。

安裝

如上所說，我們使用react開發web應用，所以只需要安裝react-router-dom。

  npm install react-router-dom --save

瞭解並使用react-router

• #BrowserRouter，這是對Router介面的實作。使得頁面和瀏覽器的history保持一致。如：window.location。

• HashRouter，跟上面的一樣，只是使用的是url的hash部分，例如：window.location.hash。

• MemoryRouter，

• #NativeRouter，處理react native內的路由。

• <a href="http://www.php.cn/wiki/188.html" target="_blank">Static</a>Router，處理靜態路由，和v3一樣。

BrowserRouter vs HashRouter

在react-router的各種router中，<browserrouter></browserrouter>和<hashrouter></hashrouter>是可以在瀏覽器中使用的。如果你使用的是一個非靜態的網站、要處理各種不同的url那麼你就需要使用BrowserRouter。相反的如果你的server只處理靜態的url，那就使用HashRouter。

理解並使用Route

元件是react router v4裡最有用的元件。背後的使用哲學也很簡單，無論何時你需要在匹配某個路徑的時候繪製一個元件，那麼就可以使用Route元件。

Route元件可以使用如下的屬性：

• #path屬性，字串類型，它的值就是用來匹配url的。

• component屬性，它的值就是一個元件。在path匹配成功之後會繪製這個元件。

• exact屬性，這個屬性用來指明這個路由是不是排他的匹配。

• strict屬性，  這個屬性指明路徑只符合以斜線結尾的路徑。

还有其他的一些属性，可以用来代替component属性。

• render属性，一个返回React组件的方法。传说中的rencer-prop就是从这里来的。

• children属性，返回一个React组件的方法。只不过这个总是会绘制，即使没有匹配的路径的时候。

多数的时候是用component属性就可以满足。但是，某些情况下你不得不使用render或children属性。

• match

• location

• history

如：
使用组件：

<route></route>

使用render属性实现内联绘制：

<route><p>HomePage</p>} /></route>

来看哥更复杂的：

const FadingRoute = ({ component, ...rest }) => (
  <route> (
    <fadein>
      <componnet></componnet>
    </fadein>
  )} />
)
<fadingroute></fadingroute></route>

使用children：

     

const ListItemLink = ({to, ...rest}) => (    (     

      <link>     

  )} /> )

更多关于react-router v4如何匹配路径的内容，请移步这里。

URL / Path / Route的参数

通常情况下，我们都会在路径里添加参数。这样方便在不同的组件之间传递一些必要的数据。那么我们如何才能获取到这些传递的参数，并传递给组件中呢？我们只需要在路径的最后加上/:param。如：

<route></route>
const HomePage = ({match}) => (
  

    
 parameter => {match.params.param1}
  
);

一旦有路径可以匹配成功，那么就会穿件一个拥有如下属性的对象，并传入绘制的组件里：

• url: 匹配的url。

• path：就是path。

• isExact：如果path和当前的widnow.location的path部分完全相同的话。

• params：在URL里包含的参数。

理解并使用Link

Link是react router v4特有的一个组件。是用来代替上一版的anchor link。使用Link可以在React应用的不同页面之间跳转。与unclor会重新加载整个页面不同，Link只会重新加载页面里和当前url可以匹配的部分。

Link组件需要用到to属性，这个属性的值就是react router要跳转到的地址。如：

import { Link } from 'react-router-dom';
const Nav = () => (
  <link>Home
);

当被点击的时候，会跳转到路径：/。

to属性的值可以是一个字符串，也可以是一个location（pathname, hash, state和search）对象。比如：

<link>

Link也可以使用replace属性，如果点击的话，那么history里的当前领会被replace。

<link>和

NavLink是Link的一个子类，在Link组件的基础上增加了绘制组件的样式，比如：

<navlink>
  My Profile
</navlink>

使用react router dom实现你的第一个demo

现在我们用react router dom来实现第一个demo。

首先，引入必要的组件。比如：Route和BrowserRouter。

import { BrowserRouter, Route } from 'react-router-dom';

接下来，我们创建一些组件和一些Html标签。同时我们用react router v4里的Link和NavLink组件。

const BaseLayout = () => (
  

    

      
React Router v4 Browser Example
      

        

          

<link>Home
          

<link>About
          

<link>Profile
          

<link>Login
          

<link>Register
          

<link>Contact
        
      
    
    

      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
    
    

      React Router v4 Browser Example (c) 2017
    
  
);

然后我们来创建需要的组件：

const HomePage = () => <p>This is a Home Page</p>
const LoginPage = () => <p>This is a Login Page</p>
const RegisterPage = () => <p>This is a Register Page</p>
const ProfilePage = () => <p>This is a Profile Page</p>
const AboutPage = () => <p>This is a About Page</p>
const ContactPage = () => <p>This is a Contact Page</p>

最后，写App组件。

const App = () => (
  <browserrouter>
    <baselayout></baselayout>
  </browserrouter>
)
render(<app></app>, document.getElementById('root'));

如你所见，react router v4的组件还非常的易用的。

理解和使用非排他的路由

在上例中，我们在HomePage组件的路由里使用了属性exact。

<route></route>

这是因为v4中的路由默认都是非排他的，这一点和v3的实现思路截然不同。如果没有exact属性，HomePage组件和其他的组件就会同事绘制在页面上。

如，当用户点了登录连接以后，"/"和"/login"都满足匹配条件，对应的登录组件和Home组件就会同时出现在界面上。但是，这不是我们期待的结果，所以我们要给"/"path加上exact属性。

现在我们来看看非排他的路由有什么优点。假如我们有一个子菜单组件需要显示在profile页面出现的时候也出现。我们可以简单的修改BasicLayout来实现。

const BaseLayout = () =>  (
  

    

      
React Router v4 Browser Example
      

        

          

<link>Home
          

<link>About
          

            <link>Profile
            &lt;route&gt;&lt;/route&gt;
          
          {/*略*/}
        
      
    
  

);

这样我们就会看到对应于"/me"路径的组件都绘制出来了。这就是非排他路由的好处。

理解排他路由

排他路由是react router v3的默认实现。只有第一个匹配的路由对应的组件会被绘制。这一点也可以用react router v4的Switch组件来实现。在Switch组件中，只有第一个匹配的路由<route></route>或者<redirect></redirect>会被绘制：

import { Switch, Route } from 'react-router';

  <route></route>
  <route></route>
  <route></route>
  <route></route>

浏览器历史

react router v4中，提供了一个history对象。这个对象包含了多个api，可以用来操作浏览器历史等。

你也可以在React应用里使用history对象的方法：

history.push("/my-path")
history.replace("/my-path")

用另外的方法可以写成：

<link>
&lt;redirect&gt;&lt;/redirect&gt;

使用组件实现重定向

无论何时你要重定向到另外一个地址的时候，都可以使用Redirect组件：

<redirect></redirect>

或者，更为简单的：

<redirect></redirect>

最后

react router v4让开发react应用变得更加的简单。让react应用内的页面跳转更加简单。你只需要声明一个BrowserRouter或者HashRouter，然后在它的内部放上一系列的Route组件，这些主键只要包含path和component属性。无论何时有了匹配的路由，那么它就会进行非排他的绘制（所有匹配的路由都会绘制）。你也可以把Route放在Switch组件里来实现排他的绘制（只有第一个匹配的路由会被绘制）。你可以在路径中传递参数，match对象会保留这些参数。最后，所有在web中使用的路由组件都包含在react-router-dom中。只需要引入react-router-dom就可以使用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Chart.js 轻量级HTML5图表绘制工具库使用步骤详解

Chart.js轻量级图表库使用案例解析

以上是React-router v4使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！