25、React路由与数据处理全解析

React路由与数据处理全解析

1. React路由中的属性传递

在React Router里，常常需要把数据传递给嵌套路由，这一操作并不复杂。例如， Posts 组件需要获取关于文章的相关数据。在下面的代码中， Posts 组件访问了 app.jsx 文件里 <Route/> 传递的属性 posts ，这些数据来自 posts.js 文件。

const {Link} = require('react-router')
const React = require('react')
module.exports = function Posts(props) {
    return <div>Posts
        <ol>
            {props.route.posts.map((post, index)=>
                <li key={post.slug}><Link to={`/posts/${post.slug}`} >{post.title}</Link></li>
            )}
        </ol>
    </div>
}

可以把任何数据作为属性传递给路由，例如 <Route path="/posts" com