react-router-dom示例讲解（七），路径递归

在react-router-dom的官方示例中，路径递归不是最难的，但是绝对是一个比较难理解的示例demo。

本示例的效果图如下：

相关示例核心代码：

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

const persons = [
    { id: 0, name: 'Michelle', friends: [ 1, 2, 3 ] },
    { id: 1, name: 'Sean', friends: [ 0, 3 ] },
    { id: 2, name: 'Kim', friends: [ 0, 1, 3 ], },
    { id: 3, name: 'David', friends: [ 1, 2 ] }
];

const find = (id) => persons.find(p => p.id == id);


class App extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            
                
            
        );
    }
}

class Person extends Component{

    render(){
        var person = find(this.props.match.params.id);

        return (
            

{person.name}’s Friends

{ person.friends.map(id => { return

{find(id).name}

}) }

那么，代码中的核心点是什么？个人认为是Route组件以及它的children属性，官方文档是这样描述children属性的——有些时候，我们需要根据匹配的当前路径的不同，展示不同的dom，这个时候就是children属性出场的时候。

在上面的Person组件中，它自身调用了自己，形成了路径递归的视图展示效果！

也就是Person中展示的视图包含Link组件，Link组件链接的Route又展示的Person。