Node.js 在快速路线上渲染react组件

我有一个应用程序，它使用express服务器和

create react app

前端。结构是这样的。（不包括结构中的所有文件-仅包括重要的文件）

我的index.js文件正在启动express服务器，如下所示-

const express = require( 'express' );

const app = express();
const PORT = process.env.PORT || 5000;

require('./routes/routes')( app );

app.use( express.static( 'client/build' ));

app.listen( PORT, () => {
    console.log( "Server is running on port 5000 " );
});

服务器端的路由文件如下所示-

module.exports = ( app ) => {

    app.get( '/', ( req, res ) => {
        console.log("Hello");
        res.send( "Hello" );
    });

    app.get( '/steam', ( req, res ) => {
        res.send( "Place for Steam!!");
    });

    app.get( '/github', ( req, res ) => {
        res.send("Place for Github!!");
    });
}

我的app.js文件

class App extends Component {
    render() {
        return (
            <div className="App">
                <BrowserRouter>
                    <div className="container">
                        <Route path="/" component={ Landing }/>
                        <Route path="/steam" exact component={ Steam } />
                        <Route path="/github" exact component={ Github } />
                    </div>
                </BrowserRouter>
            </div>

        );
    }
}

export default App;

类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

在我的客户端，我主要关注的文件是landing.js，如下所示

class Landing extends Component{
    render(){
        return(
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <div className="bg">
                            <img src="https://www.bleepstatic.com/content/hl-images/2016/12/23/Steam-Logo.jpg" alt="" />
                            <div className="overlay">
                                <a href="/steam" className="custombutton custombutton-white custombutton-big">Steam Info</a>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="bg">
                            <img src="https://linuxforlyf.files.wordpress.com/2017/10/github-universe1.jpg" alt="" />
                            <div className="overlay">
                                <a href="/github" className="custombutton custombutton-white custombutton-big">Github Info</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Landing;

类着陆扩展组件{
render（）{
返回(
)
}
}
导出默认着陆；

---

在上面的组件中，我关心的是

a

标记，它导致

/steam

或

/github

快速路由，这是有意的，因为我想重新加载页面，在页面上我只得到

res.send

数据，这是有意义的，因为这是一条快速路由。但是我想在

/steam

路径上渲染我的

steam

组件。（与github相同）。我希望

App.js

中的

BrowserRouter

能够根据路由更改组件，但事实并非如此。我是，只得到快速数据。如何在

express

'/Steam'

路线上渲染我的

Steam

react组件。显然，我以一种奇怪的方式混合了服务器端和客户端。

只需使用

res.render（'index'）用于所有后端路由

在这里，我们正在使用react构建一个单页应用程序，这意味着只有一个条目文件（只有一个html文件，通常是
index.html
），页面呈现方式不同，因为我们的js代码检查url并决定显示什么（使用哪个前端路由）。它们都发生在浏览器收到html文件以及包含的js/css文件之后。当接收到页面请求时，后端所要做的就是发送相同的html文件（以及浏览器解析html后的js/css文件）。当然，对于数据/xhr请求和无效请求，我们需要相应地发送数据和
404.html
。
它不是一个单页应用程序。我正在使它成为一个多页的应用程序。我正在尝试使用标记重定向到“/steam”路由，然后在那里呈现“steam”组件（我将使此steam组件成为一种单页应用程序，因此每个快速路由都有一个单页应用程序，如github、steam等）。@kiiInnnnnnyyyy类似，只需让后端路由返回包含前端安装点的页面，例如，在
steam.html
和
ReactDOM.render（，document.getElementById（'steam'）中有一个
#steam
DOM节点
用于前端，然后在后端返回
steam.html
用于
/steam
。但这可能不是必需的，您可以将它们放在前端的
index.html
中，并使用React Router控制当链接将用户带到不同页面时要呈现的内容。@PanJunjie潘俊杰  这应该适用于多页系统，但我使用的是单页应用程序，那么该怎么做呢？@akshaykishore这应该是我的答案所说的，但是答案和上面的评论有非常相似的解决方案。简而言之，“让后端返回正确的html”。
class Landing extends Component{
    render(){
        return(
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <div className="bg">
                            <img src="https://www.bleepstatic.com/content/hl-images/2016/12/23/Steam-Logo.jpg" alt="" />
                            <div className="overlay">
                                <a href="/steam" className="custombutton custombutton-white custombutton-big">Steam Info</a>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="bg">
                            <img src="https://linuxforlyf.files.wordpress.com/2017/10/github-universe1.jpg" alt="" />
                            <div className="overlay">
                                <a href="/github" className="custombutton custombutton-white custombutton-big">Github Info</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Landing;