显示动态路线的动态内容

Question

问题在于我拥有buildRoutes()，它基本上通过使用DataActions.getPage()迭代从现有WordPress网站收到的数据来完成所有操作。现在我想制作某种模板来显示我点击的每条路线的“title.rendered”和“content.rendered”。 但我被困住了。也许模板甚至是不必要的。

   import React, { Component }      from 'react';
   import { render }                from 'react-dom';
   import App                       from './components/App.js';
   import Home                  from './components/Home.js';
   import About                     from './components/About.js';
   import registerServiceWorker     from './registerServiceWorker';
   import DataActions               from './actions/DataAction.js';
   import views                     from './components/views.js';
   import { 
        BrowserRouter as Router,
        Route, 
        Link,
        Switch
    }                               from 'react-router-dom';
   import './css/index.css';


    export default class AppInitializer {



        buildRoutes(data) {
            return data.pages.map((page, i) => {
                const component = views[page.slug];
                return (
                    <Route 
                    getComponent={
                        (nextState, cb) => { 
                            require.ensure([], (require) => {
                                cb(null, require(component).default); 
                            });
                        }
                    }
                    key={ page.id }
                    path={`/${page.slug}`}
                    />               
                    );
            });
        }


        setContent(data) { return data.pages.map((page,i) => {
                        // console.log(page.id)
                        return page.content.rendered
                    })}

        run() {
            DataActions.getPages((response)=>{

                render(( 
                    <Router>
                        <App>
                            <Switch>

                            {this.buildRoutes(response)}
                            {console.log('Heeeey')}
                            <div>{this.setContent(response)}</div>

                            </Switch>
                        </App>
                    </Router>), document.getElementById('root')

                );
            });
        }
    }

    new AppInitializer().run();

  

GETPAGES

import axios from 'axios';
import alt   from './../alt/alt.js';

class DataActions {

    constructor() {
        const appUrl = 'http://test.dk'; // Replace this with your WP installation url

        this.pagesEndPoint = `${appUrl}/wp-json/wp/v2/pages/?per_page=100`; // Endpoint for getting Wordpress Pages
        this.postsEndPoint = `${appUrl}/wp-json/wp/v2/posts`; // Endpoint for getting Wordpress Posts
    }

    // Method for getting data from the provided endpoint URL
    API(endPoint) {
        return new Promise((resolve, reject) => {
            axios.get(endPoint).then((response) => {
                resolve(response.data);
            }).catch((error) => {
                reject(error);
            }); 
        });     
    }

    // Method for getting Pages data
    getPages(cb){
        this.api(this.pagesEndPoint).then((response)=>{
            this.getPosts(response, cb)
        });
    }

    // Method for getting Posts data
    getPosts(pages, cb){
        this.api(this.postsEndPoint).then((response)=>{
            const posts     = response
            const payload   = { pages, posts };

            this.getSuccess(payload); // Pass returned data to the store
            cb(payload); // This callback will be used for dynamic rout building
        });
    }

    // This returns an object with Pages and Posts data together
    // The Alt Store will listen for this method to fire and will store the returned data
    getSuccess(payload){
        return payload;
    }
}

export default alt.createActions(DataActions);