React Router教程

React項(xiàng)目的可用的路由庫(kù)是React-Router,當(dāng)然這也是官方支持的。它也分為：

• react-router 核心組件
• react-router-dom 應(yīng)用于瀏覽器端的路由庫(kù)（單獨(dú)使用包含了react-router的核心部分）
• react-router-native 應(yīng)用于native端的路由

以下教程我們都以Web端為主，所以所有的教程內(nèi)容都是默認(rèn)關(guān)于react-router-dom的介紹。
<meta charset="utf-8>

進(jìn)行網(wǎng)站（將會(huì)運(yùn)行在瀏覽器環(huán)境中）構(gòu)建掩宜，我們應(yīng)當(dāng)安裝react-router-dom芽突。react-router-dom暴露出react-router中暴露的對(duì)象與方法竿滨，因此你只需要安裝并引用react-router-dom即可。
官方文檔地址：https://reacttraining.com/react-router/web/guides/philosophy

Installation | 安裝

安裝：

yam add react-rourer-dom
#或者徒役，不使用yarn
npm install react-router-dom

路由的基本概念

現(xiàn)在的React Router版本中已不需要路由配置孽尽，現(xiàn)在一切皆組件。
ReactRouter中提供了以下三大組件：

• Router是所有路由組件共用的底層接口組件忧勿，它是路由規(guī)則制定的最外層的容器泻云。
• Route路由規(guī)則匹配，并顯示當(dāng)前的規(guī)則對(duì)應(yīng)的組件狐蜕。
• Link路由跳轉(zhuǎn)的組件

當(dāng)然每個(gè)組件下又會(huì)有幾種不同的子類組件實(shí)現(xiàn)宠纯。比如： Router組件就針對(duì)不同功能和平臺(tái)對(duì)應(yīng)用：

• <BrowserRouter>瀏覽器的路由組件
• <HashRouter>URL格式為Hash路由組件
• <MemoryRouter>內(nèi)存路由組件
• <NativeRouter>Native的路由組件
• <StaticRouter>地址不改變的靜態(tài)路由組件

三大組件使用的關(guān)系：

image.png

如果說(shuō)我們的應(yīng)用程序是一座小城的話，那么Route就是一座座帶有門牌號(hào)的建筑物层释，而Link就代表了到某個(gè)建筑物的路線婆瓜。有了路線和目的地，那么就缺一位老司機(jī)了贡羔，沒錯(cuò)Router就是這個(gè)老司機(jī)廉白。

第一個(gè)Demo

現(xiàn)在你可以復(fù)制任意的示例代碼，并粘貼到 src/App.js乖寒。如下：

import React, { Component } from 'react';
import { HashRouter as Router, Link, Route } from 'react-router-dom';
import './App.css';

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

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Product = () => (
  <div>
    <h2>Product</h2>
  </div>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Link to="/">Home</Link>
          <Link to="/About">About</Link>
          <Link to="/Product">Product</Link>
          <hr/>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/product" component={Product}></Route>
        </div>
      </Router>
    );
  }
}

export default App;

Router組件

BrowserRouter組件

BrowserRouter主要使用在瀏覽器中猴蹂，也就是WEB應(yīng)用中。它利用HTML5 的history API來(lái)同步URL和UI的變化楣嘁。當(dāng)我們點(diǎn)擊了程序中的一個(gè)鏈接之后,BrowserRouter就會(huì)找出與這個(gè)URL匹配的Route磅轻，并將他們對(duì)應(yīng)的組件渲染出來(lái)。 BrowserRouter是用來(lái)管理我們的組件的逐虚，那么它當(dāng)然要被放在最頂級(jí)的位置聋溜，而我們的應(yīng)用程序的組件就作為它的一個(gè)子組件而存在。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.body);

BrowserRouter組件提供了四個(gè)屬性叭爱。

• basename: 字符串類型撮躁，路由器的默認(rèn)根路徑
• forceRefresh: 布爾類型，在導(dǎo)航的過(guò)程中整個(gè)頁(yè)面是否刷新
• getUserConfirmation: 函數(shù)類型买雾，當(dāng)導(dǎo)航需要確認(rèn)時(shí)執(zhí)行的函數(shù)把曼。默認(rèn)是：window.confirm
• keyLength: 數(shù)字類型location.key的長(zhǎng)度。默認(rèn)是 6

basename 屬性

當(dāng)前位置的基準(zhǔn) URL漓穿。如果你的頁(yè)面部署在服務(wù)器的二級(jí)（子）目錄嗤军，你需要將 basename 設(shè)置到此子目錄。正確的 URL 格式是前面有一個(gè)前導(dǎo)斜杠器净，但不能有尾部斜杠型雳。

例如：有時(shí)候我們的應(yīng)用只是整個(gè)系統(tǒng)中的一個(gè)模塊当凡，應(yīng)用中的URL總是以 http://localhost/admin/ 開頭山害。這種情況下我們總不能每次定義Link和Route的時(shí)候都帶上admin吧纠俭？react-router已經(jīng)考慮到了這種情況，所以為我們提供了一個(gè)basename屬性浪慌。為BrowserRouter設(shè)置了basename之后冤荆，Link中就可以省略掉admin了，而最后渲染出來(lái)的URL又會(huì)自動(dòng)帶上admin权纤。

<BrowserRouter basename="/admin"/>
    ...
    <Link to="/home"/> // 被渲染為 <a href="/admin/home">
    ...
</BrowserRouter>

getUserConfirmation: func

當(dāng)導(dǎo)航需要確認(rèn)時(shí)執(zhí)行的函數(shù)钓简。默認(rèn)使用window.confirm。

// 使用默認(rèn)的確認(rèn)函數(shù)
const getConfirmation = (message, callback) => {
 const allowTransition = window.confirm(message)
 callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

forceRefresh: bool

(https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=forcerefresh-bool)
當(dāng)設(shè)置為 true 時(shí)汹想，在導(dǎo)航的過(guò)程中整個(gè)頁(yè)面將會(huì)刷新外邓。 只有當(dāng)瀏覽器不支持 HTML5 的 history API 時(shí)掸鹅，才設(shè)置為 true非凌。

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

keyLength: number

(https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=keylength-number)
location.key的長(zhǎng)度。默認(rèn)是 6
<BrowserRouter keyLength={12}/>

children: node

渲染單一子組件（元素）翎碑。

HashRouter

HashRouter 使用 URL 的 hash (例如window.location.hash) 來(lái)保持 UI 和 URL 的同步槽唾。

注意： 使用 hash 的方式記錄導(dǎo)航歷史不支持 location.key和location.state丧枪。在以前的版本中，我們?yōu)檫@種行為提供了 shim庞萍，但是仍有一些問題我們無(wú)法解拧烦。任何依賴此行為的代碼或插件都將無(wú)法正常使用。由于該技術(shù)僅用于支持傳統(tǒng)的瀏覽器钝计，因此在用于瀏覽器時(shí)可以使用<BrowserHistory>代替恋博。
跟BrowserRouter類似，它也有：basename私恬、getUserConfirmation交播、children屬性，而且是一樣的践付。

hashType: string

window.location.hash 使用的 hash 類型秦士。有如下幾種：

• "slash" - 后面跟一個(gè)斜杠，例如 #/ 和 #/sunshine/lollipops
• "noslash" - 后面沒有斜杠永高，例如 # 和 #sunshine/lollipops
• "hashbang" - Google 風(fēng)格的 "ajax crawlable"隧土，例如 #!/ 和 #!/sunshine/lollipops

默認(rèn)為 "slash"。

MemoryRouter

主要用在ReactNative這種非瀏覽器的環(huán)境中命爬，因此直接將URL的history保存在了內(nèi)存中曹傀。 StaticRouter 主要用于服務(wù)端渲染。

Link組件

Link就像是一個(gè)個(gè)的路牌饲宛，為我們指明組件的位置皆愉。Link使用聲明式的方式為應(yīng)用程序提供導(dǎo)航功能，定義的Link最終會(huì)被渲染成一個(gè)a標(biāo)簽。Link使用to這個(gè)屬性來(lái)指明目標(biāo)組件的路徑幕庐，可以直接使用一個(gè)字符串久锥，也可以傳入一個(gè)對(duì)象。

import { Link } from 'react-router-dom'
// 字符串參數(shù)
<Link to="/query">查詢</Link>

// 對(duì)象參數(shù)
<Link to={{
  pathname: '/query',
  search: '?key=name',
  hash: '#hash',
  state: { fromDashboard: true }
}}>查詢</Link>

屬性： to

需要跳轉(zhuǎn)到的路徑(pathname)或地址（location）异剥。

屬性：replace: bool

當(dāng)設(shè)置為 true時(shí)瑟由，點(diǎn)擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址。
當(dāng)設(shè)置為 false 時(shí)冤寿，點(diǎn)擊鏈接后將在原有訪問歷史記錄的基礎(chǔ)上添加一個(gè)新的紀(jì)錄歹苦。
默認(rèn)為 false。

<Link to="/courses" replace />

NavLink組件

NavLink是一個(gè)特殊版本的Link督怜，可以使用activeClassName來(lái)設(shè)置Link被選中時(shí)被附加的class殴瘦，使用activeStyle來(lái)配置被選中時(shí)應(yīng)用的樣式。此外号杠，還有一個(gè)exact屬性,此屬性要求location完全匹配才會(huì)附加class和style痴施。這里說(shuō)的匹配是指地址欄中的URl和這個(gè)Link的to指定的location相匹配。

// 選中后被添加class selected
<NavLink to={'/'} exact activeClassName='selected'>Home</NavLink>
// 選中后被附加樣式 color:red
<NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>

activeClassName默認(rèn)值為 active

屬性

• to 可以是字符串或者對(duì)象究流，同Link組件
• exact 布爾類型辣吃，完全匹配時(shí)才會(huì)被附件class和style
• activeStyle Object類型
• activeClassName 字符串類型
• strict: bool類型，當(dāng)值為 true 時(shí)芬探，在確定位置是否與當(dāng)前 URL 匹配時(shí)神得，將考慮位置 pathname后的斜線。

Route組件

Route應(yīng)該是react-route中最重要的組件了偷仿，它的作用是當(dāng)location與Route的path匹配時(shí)渲染Route中的Component哩簿。如果有多個(gè)Route匹配，那么這些Route的Component都會(huì)被渲染酝静。
與Link類似节榜，Route也有一個(gè)exact屬性，作用也是要求location與Route的path絕對(duì)匹配别智。

// 當(dāng)location形如 http://location/時(shí)宗苍，Home就會(huì)被渲染。
// 因?yàn)?"/" 會(huì)匹配所有的URL薄榛，所以這里設(shè)置一個(gè)exact來(lái)強(qiáng)制絕對(duì)匹配讳窟。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>

Route的三種渲染方式

1. component: 這是最常用也最容易理解的方式，給什么就渲染什么敞恋。
2. render: render的類型是function丽啡，Route會(huì)渲染這個(gè)function的返回值。因此它的作用就是附加一些額外的邏輯硬猫。

<Route path="/home" render={() => {
    console.log('額外的邏輯');
    return (<div>Home</div>);
    }/>

1. children: 這是最特殊的渲染方式补箍。

一改执、它同render類似,是一個(gè)function。不同的地方在于它會(huì)被傳入一個(gè)match參數(shù)來(lái)告訴你這個(gè)Route的path和location匹配上沒有坑雅。
二辈挂、第二個(gè)特殊的地方在于，即使path沒有匹配上霞丧，我們也可以將它渲染出來(lái)。秘訣就在于前面一點(diǎn)提到的match參數(shù)冕香。我們可以根據(jù)這個(gè)參數(shù)來(lái)決定在匹配的時(shí)候渲染什么蛹尝，不匹配的時(shí)候又渲染什么。

// 在匹配時(shí)悉尾，容器的calss是light突那，<Home />會(huì)被渲染
// 在不匹配時(shí)，容器的calss是dark构眯，<About />會(huì)被渲染
<Route path='/home' children={({ match }) => (
    <div className={match ? 'light' : 'dark'}>
      {match ? <Home/>:<About>}
    </div>
  )}/>

所有路由中指定的組件將被傳入以下三個(gè) props 愕难。

• match.
• location.
• history.

這里主要說(shuō)下match.params.透過(guò)這個(gè)屬性，我們可以拿到從location中解析出來(lái)的參數(shù)惫霸。當(dāng)然猫缭，如果想要接收參數(shù)，我們的Route的path也要使用特殊的寫法壹店。

如下示例猜丹，三個(gè)Link是一個(gè)文章列表中三個(gè)鏈接，分別指向三篇id不同的文章硅卢。而Route用于渲染文章詳情頁(yè)射窒。注意path='/p/:id' ，location中的對(duì)應(yīng)的段會(huì)被解析為id=1 這樣的鍵值将塑。最終這個(gè)鍵值會(huì)作為param的鍵值存在脉顿。Route中的組件可以使用this.props.match.params.id來(lái)獲取，示例中使用了結(jié)構(gòu)賦值点寥。

<Link to='/p/2' />
<Link to='/p/3' />
......
<Route path='/p/:id' render={(match)=<h3>當(dāng)前文章ID:{match.params.id}</h3>)} />

location

Location 是指你當(dāng)前的位置艾疟，下一步打算去的位置，或是你之前所在的位置敢辩，形式大概就像這樣：

{
  key: 'ac3df4', // 在使用 hashHistory 時(shí)汉柒，沒有 key
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

你使用以下幾種方式來(lái)獲取 location 對(duì)象：

• 在 Route component 中，以 this.props.location 的方式獲取责鳍，
• 在 Route render 中碾褂，以 ({ location }) => () 的方式獲取，
• 在 Route children 中历葛，以 ({ location }) => () 的方式獲取正塌，
• 在 withRouter 中嘀略，以 this.props.location 的方式獲取。

你也可以在 history.location 中獲取 location 對(duì)象乓诽，但是別那么寫帜羊，因?yàn)?history 是可變的。更多信息請(qǐng)參見 [history 文檔]
(https://malun666.github.io/aicoder_vip_doc/#/./history)鸠天。

location 對(duì)象不會(huì)發(fā)生改變讼育，因此你可以在生命周期的鉤子函數(shù)中使用 location 對(duì)象來(lái)查看當(dāng)前頁(yè)面的位置是否發(fā)生改變，這種技巧在獲取遠(yuǎn)程數(shù)據(jù)以及使用動(dòng)畫時(shí)非常有用稠集。

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // 已經(jīng)跳轉(zhuǎn)了奶段！
  }
}

通常情況下，你只需要給一個(gè)字符串當(dāng)做 location 剥纷，但是痹籍，當(dāng)你需要添加一些 location 的狀態(tài)時(shí)，你可以對(duì)象的形式使用 location 晦鞋。并且當(dāng)你需要多個(gè) UI 蹲缠，而這些 UI 取決于歷史時(shí)，例如彈出框（modal）悠垛，使用location 對(duì)象會(huì)有很大幫助线定。

// 通常你只需要這樣使用 location
<Link to="/somewhere"/>

// 但是你同樣可以這么用
const location = {
  pathname: '/somewhere'
  state: { fromDashboard: true }
}

<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

最后，你可以把 location 傳入一下組件：

• [Route]
• [Switch]

這樣做可以讓組件不使用路由狀態(tài)（router state）中的真實(shí) location确买，因?yàn)槲覀冇袝r(shí)候需要組件去渲染一個(gè)其他的 location 而不是本身所處的真實(shí) location渔肩，比如使用動(dòng)畫或是等待跳轉(zhuǎn)時(shí)。

history

本文檔中的「history」以及「history對(duì)象」請(qǐng)參照 history 包中的內(nèi)容拇惋。 History 是 React Router 的兩大重要依賴之一（除去 React 本身）周偎，在不同的 Javascript 環(huán)境中，history 以多種形式實(shí)現(xiàn)了對(duì)于 session 歷史的管理撑帖。
我們會(huì)經(jīng)常使用以下術(shù)語(yǔ)：

• 「browser history」 - history 在 DOM 上的實(shí)現(xiàn)蓉坎，經(jīng)常使用于支持 HTML5 history API 的瀏覽器端。
• 「hash history」 - history 在 DOM 上的實(shí)現(xiàn)胡嘿，經(jīng)常使用于舊版本瀏覽器端蛉艾。
• 「memory history」 - 一種存儲(chǔ)于內(nèi)存的 history 實(shí)現(xiàn)，經(jīng)常用于測(cè)試或是非 DOM 環(huán)境（例如 React Native）衷敌。

history 對(duì)象通常會(huì)具有以下屬性和方法：

• length -（ number 類型）指的是 history 堆棧的數(shù)量勿侯。
• action -（ string 類型）指的是當(dāng)前的動(dòng)作（action），例如 PUSH缴罗，REPLACE 以及 POP 助琐。
• location -（ object類型）是指當(dāng)前的位置（location），location 會(huì)具有如下屬性：
  • pathname -（ string 類型）URL路徑面氓。
  • search -（ string 類型）URL中的查詢字符串（query string）兵钮。
  • hash -（ string 類型）URL的 hash 分段蛆橡。
  • state -（ string 類型）是指 location 中的狀態(tài)，例如在 push(path, state) 時(shí)掘譬，state會(huì)描述什么時(shí)候 location 被放置到堆棧中等信息泰演。這個(gè) state 只會(huì)出現(xiàn)在 browser history 和 memory history 的環(huán)境里。
• push(path, [state]) -（ function 類型）在 hisotry 堆棧頂加入一個(gè)新的條目葱轩。
• replace(path, [state]) -（ function 類型）替換在 history 堆棧中的當(dāng)前條目睦焕。
• go(n) -（ function 類型）將 history 對(duì)戰(zhàn)中的指針向前移動(dòng) n 。
• goBack() -（ function 類型）等同于 go(-1) 靴拱。
• goForward() -（ function 類型）等同于 go(1) 垃喊。
• block(prompt) -（ function 類型）阻止跳轉(zhuǎn)，（請(qǐng)參照 history 文檔）

match

match 對(duì)象包含了 <Route path> 如何與URL匹配的信息缭嫡。match 對(duì)象包含以下屬性：

• params -（ object 類型）即路徑參數(shù)缔御，通過(guò)解析URL中動(dòng)態(tài)的部分獲得的鍵值對(duì)抬闷。
• isExact - 當(dāng)為 true 時(shí)妇蛀，整個(gè)URL都需要匹配。
• path -（ string 類型）用來(lái)做匹配的路徑格式笤成。在需要嵌套 <Route> 的時(shí)候用到评架。
• url -（ string 類型）URL匹配的部分，在需要嵌套 <Link> 的時(shí)候會(huì)用到炕泳。

你可以在以下地方獲取 match 對(duì)象：

• 在 Route component 中纵诞，以 this.props.match 方式。
• 在 Route render中培遵，以 ({ match }) => () 方式浙芙。
• 在 Route children中，* 以 ({ match }) => () 方式

Redirect組件

當(dāng)這個(gè)組件被渲染是籽腕，location會(huì)被重寫為Redirect的to指定的新location嗡呼。它的一個(gè)用途是登錄重定向，比如在用戶點(diǎn)了登錄并驗(yàn)證通過(guò)之后皇耗，將頁(yè)面跳轉(zhuǎn)到個(gè)人主頁(yè)南窗。

<Redirect to="/new"/>

Switch組件

渲染匹配地址(location)的第一個(gè) <Route>或者<Redirect>

這與只使用一堆<Route>有什么不同？

<Switch>的獨(dú)特之處是獨(dú)它僅僅渲染一個(gè)路由郎楼。相反地万伤，每一個(gè)包含匹配地址(location)的<Route>都會(huì)被渲染。思考下面的代碼：

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果現(xiàn)在的URL是 /about 呜袁，那么 <About>, <User>, 還有 <NoMatch> 都會(huì)被渲染敌买，因?yàn)樗鼈兌寂c路徑(path)匹配。這種設(shè)計(jì)阶界，允許我們以多種方式將多個(gè) <Route> 組合到我們的應(yīng)用程序中放妈，例如側(cè)欄(sidebars)北救，面包屑(breadcrumbs)，bootstrap tabs等等芜抒。 然而珍策，偶爾我們只想選擇一個(gè)<Route> 來(lái)渲染。如果我們現(xiàn)在處于 /about宅倒，我們也不希望匹配 /:user （或者顯示我們的 "404" 頁(yè)面 ）攘宙。以下是使用 Switch 的方法來(lái)實(shí)現(xiàn)：

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

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

現(xiàn)在，如果我們處于/about, <Switch>將開始尋找匹配的<Route>拐迁。 <Route path="/about"/>將被匹配蹭劈，<Switch> 將停止尋找匹配并渲染<About>。 同樣线召，如果我們處于/michael铺韧， <User>將被渲染。
這對(duì)于過(guò)渡動(dòng)畫也是起作用的缓淹，因?yàn)槠ヅ涞?code><Route> 在與前一個(gè)相同的位置被渲染哈打。

<Fade>
  <Switch>
    {/* there will only ever be one child here */}
    {/* 這里只會(huì)有一個(gè)子節(jié)點(diǎn) */}
    <Route/>
    <Route/>
  </Switch>
</Fade>

<Fade>
  <Route/>
  <Route/>
  {/* there will always be two children here,
      one might render null though, making transitions
      a bit more cumbersome to work out */}
   {/* 這里總是有兩個(gè)子節(jié)點(diǎn),
      一個(gè)可能會(huì)渲染為null, 使計(jì)算過(guò)渡增加了一點(diǎn)麻煩 */}    
</Fade>

路由配置

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.

////////////////////////////////////////////////////////////
// first our route components
const Main = () => <h2>Main</h2>;

const Sandwiches = () => <h2>Sandwiches</h2>;

const Tacos = ({ routes }) => (
  <div>
    <h2>Tacos</h2>
    <ul>
      <li>
        <Link to="/tacos/bus">Bus</Link>
      </li>
      <li>
        <Link to="/tacos/cart">Cart</Link>
      </li>
    </ul>

    {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
  </div>
);

const Bus = () => <h3>Bus</h3>;
const Cart = () => <h3>Cart</h3>;

////////////////////////////////////////////////////////////
// then our route config
const routes = [
  {
    path: "/sandwiches",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos,
    routes: [
      {
        path: "/tacos/bus",
        component: Bus
      },
      {
        path: "/tacos/cart",
        component: Cart
      }
    ]
  }
];

// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = route => (
  <Route
    path={route.path}
    render={props => (
      // pass the sub-routes down to keep nesting
      <route.component {...props} routes={route.routes} />
    )}
  />
);

const RouteConfigExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/tacos">Tacos</Link>
        </li>
        <li>
          <Link to="/sandwiches">Sandwiches</Link>
        </li>
      </ul>

      {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
    </div>
  </Router>
);

export default RouteConfigExample;