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 {
  render() {
    return (
      <div className="App">
        <Router>
          <Person match={{params:{id: 0}, url: ''}}/>
        </Router>
      </div>
    );
  }
}

class Person extends Component{
  render() {
    var person = find(this.props.match.params.id);
    return (
      <div>
        <h3>
          {person.name}‘s Friends
        </h3>
        <ul>
          {
            person.friends.map(id => {
              return <li key={id} >
                <Link to={`${this.props.match.url}/${id}`}>
                  {find(id).name}
                </Link>
              </li>
            })
          }
        </ul>
        <Route path={`${this.props.match.url}/:id`} component={Person}/>
      </div>
    )
  }
}

例子中路径递归的核心在于Person组件，该组件本身便是一个是路由，但该路由的Route（视图）对应的组件又是自身，从而实现了路径递归，即自己调用自己。

 例子中用到了find函数，这是es6的数组方法，用于找出第一个符合条件的数组成员。

倘若你还不理解请参考我的github上的这个示例：https://github.com/guoqin721/react-router-dom7