峠ルートは、このルートを考えると反応し、エクスプレス

Question

：

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/${page}`, (req, res) => { 
    res.render('base', { bundle: 'static' }) 
    }) 
}) 

export default router 

私は動的に.pugファイルからdangerouslySetInnerHTMLへのルート${page}を使用するコンポーネントを構築する必要があります。

import React from 'react' 
import ReactDOM from 'react-dom' 
import Page from 'app/components/base-page' 
import Static from 'app/components/static' 

let page = 

ReactDOM.render(
    <Page > 
    <Static content={this.route} /> 
    </Page>, 
    document.getElementById('content') 
) 

コンポーネント<Static content={this.route} />からdangerouslySetInnerHTMLにどの.pugファイルを知っているように、ルートコントローラと一致${page}から引き出される必要があるcontent={this.route}パラメータを：これは、コンポーネントを呼び出す私のページは次のようになります。これはどうすればできますか？

編集：明確にするために、コンポーネント自体は、次のようになります。..

export default class Static extends Component { 

    componentWillMount() { 
    this.setState({ 
     __html: '' 
    }) 

    let page = '/content/terms' 

    got({page}) 
     .then(resp => { 
     console.log(resp) 
     return resp 
     }) 
     .then(content => { 
     this.setState({ 
      __html: content 
     }) 
     }) 
     .catch((err) => { 
     console.log(err) 
     }) 
    } 

    render() { 
    return (
     <div dangerouslySetInnerHTML={this.state} /> 
    ) 
    } 
} 

私はterms.html利用に別のルートをも追加しました：

巻き上げ

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/content/${page}`, (req, res) => { 
    res.send(`content/${page}.html`) 
    console.log(req, res) 
    }) 
}) 

export default router 

Answer 1

次のような2種類のエクスプレスルータを使用してください：

static-content.js

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/content/${page}`, function (req, res) { 
    res.render(`content/${page}`, function (err, html) { 
     console.log(err) 
     res.send(html) 
    }) 
    }) 
}) 

export default router 

static.js

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/${page}`, (req, res) => { 
    res.render('base', { bundle: 'static' }) 
    }) 
}) 

export default router 

ここでページとコンポーネントJSXだ：私は

静的-page.jsx

import React from 'react' 
import ReactDOM from 'react-dom' 
import Page from 'app/components/base-page' 
import Static from 'app/components/static' 

let page = document.location.pathname 

ReactDOM.render(
    <Page > 
    <Static content={page} /> 
    </Page>, 
    document.getElementById('content') 
) 

静的-component.jsx

import React, { Component } from 'react' 
import got from 'got' 

export default class Static extends Component { 

    componentWillMount() { 
    this.setState({ 
     __html: '' 
    }) 

    let page = '/content' + this.props.content 

    got(page) 
     .then(resp => { 
     return resp.body 
     }) 
     .then(content => { 
     this.setState({ 
      __html: content 
     }) 
     }) 
     .catch((err) => { 
     console.log(err) 
     }) 
    } 

    render() { 
    return (
     <div dangerouslySetInnerHTML={this.state} /> 
    ) 
    } 
}