React Route詳解

React Route是基於React的一個路由庫，幫助我們管理web應用中的路由。使用React Route可以幫助我們更好的組織React組件，並實現非常不錯的用戶體驗。在這篇文章中，我們將從多個方面對React Route進行詳細解析。

一、React Router

React Router是React官方提供的路由庫，可以讓我們更好的管理web應用中的路由。React Router提供了3個核心組件：BrowserRouter, Switch和Route。

BrowserRouter是基於瀏覽器的history API實現的路由，在這個組件中定義了一個Router實例。

Switch是一個簡單的容器，只渲染匹配到的第一個子元素。

Route是Route path 和 component之間的映射，噹噹前路由匹配到時，會將對應的組件渲染出來。

下面是一個使用React Route的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

ReactDOM.render(
    
        
            
            
            
        
    ,
    document.getElementById('root')
);

上述代碼中我們使用包裝路由，表示只會渲染匹配到的第一個組件，表示根據訪問頁面的路由匹配對應的組件進行渲染。

二、React Router教程簡書

React Router教程簡書提供了React Route的入門教程，從入門到項目實戰逐步解釋了React Route的使用方法。

教程中包含以下核心內容，即如何在React項目中使用React Router、React Route的核心概念、React Route的基本要素、嵌套路由以及React Route的高級用法等。

下面是一個基於React Router的小計數器應用：

import React from 'react';

import ReactDOM from 'react-dom';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Count = ({ match }) => (
當前計數：{match.params.count}
   { window.location.href=`/count/${Number(match.params.count) + 1}` }}>增加
原創文章，作者：VDNVR，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/317906.html