03-创建帖子页面

8.1.1　创建帖子页面

路由运行了! 至此，已经做了大量工作来启用路由并使其在应用中工作。但还没有做任何事情来让用户浏览应用程序的不同部分。此刻，应用或许开始拥有很多页面和页面的片段。如果正在构建一个更复杂的社交网络应用程序，或许会有很多部分用于资料页、用户设置、消息等。但就本例而言，需要做的全部事情就是显示用户的帖子。打算如何做？从URL开始。还记得到目前为止示例中用了几次的 /posts/:postID 路由吗？帖子页面将会位于这个URL上。

首先将为用户帖子页面创建页面组件开始。前面几章构建了一个Post组件，它会在加载后获取数据，因此创建这个单篇帖子页面应该不会太麻烦。我们想给这个页面创建一个新组件，确保包含帖子组件，并且确保把它映射到正确的路由。有一点不同的是从何处获得帖子的ID。我们会从URL拉取到帖子的ID，而不是一上来先访问服务器获取。我们曾用特定的语法设置URL，路由器会将参数化路由的数据提供给组件。代码清单8-5展示了如何设置单篇帖子页面。

代码清单8-5　创建SinglePost组件（src/pages/Post.js）

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Ad from '../components/ad/Ad';
import Post from '../components/post/Post';
export class SinglePost extends Component {
    static propTypes = {
        params: PropTypes.shape({
            postId: PropTypes.string.isRequired  ⇽--- 导入前几章中创建的Post组件
        })
    };
    render() {
        return (
            <div className="single-post">
                <Post id={this.props.params.postId} />  ⇽--- 从路由器传入的属性中获取帖子ID
                <Ad
                    url="https://www.manning.com/books/react-in-action"
                    imageUrl="/static/assets/ads/ria.png"
                />
            </div>
        );
    }
}
export default SinglePost;

现在有一个可以用的组件了，把它集成到路由器中以便用户能够导航到帖子页面。代码清单8-6展示了如何将SinglePost组件添加到路由器。注意，我们正在利用在路由器示例中所看到的参数化路由。路径的 :post 部分会通过 params 属性传递给组件。

代码清单8-6　添加用户帖子到路由器（src/index.js）

import React from 'react';
import { render } from 'react-dom';
import * as API from './shared/http';
import { history } from './history';
import Route from './components/router/Route';
import Router from './components/router/Router';
import App from './app';
import Home from './pages/home';
import SinglePost from './pages/post';  ⇽--- 导入路由器使用的SinglePost组件
//...
export const renderApp = (state, callback = () => {}) => {
    render(
        <Router {...state}>
            <Route path="" component={App}>
                <Route path="/" component={Home} />
                <Route path="/posts/:postId" component={SinglePost} />  ⇽--- 使用特定的参数化路由语法（:post）配置SinglePost路由
            </Route>
        </Router>,
        document.getElementById('app'),
        callback
    );
};
//...