Question

我有一个使用快速服务器和create-react-app前端的应用程序。结构看起来像这样。（不包括结构中的所有文件 - 只包括重要的文件）

Client-
     build
     etc
     public
     src-
         assets
         components- 
                 landing-
                    landing.js
                 github-
                    github.js
                 steam-
                    steam.js
         App.js
         index.js
routes-
     routes.js
index.js

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

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;

在我的客户端，我的主要关注文件在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;

在上面的组件中，我关心的是a标记，它导致/steam或/github快速路由，这是故意的原因我想重新加载页面和页面我只收到res.send数据，这是有道理的，因为这是一条快速路线。但我想在steam路线上渲染我的/steam组件。（与github相同）。我希望BrowserRouter中的App.js会根据路线改变组件，但事实并非如此。我是，只收到快递数据。如何在Steam express路线上呈现我的'/steam'反应组件。显然，我正在以奇怪的方式混合服务器和客户端。

Answer 1

只需对所有后端路由使用res.render('index');即可。

这里我们正在构建一个带有react的单页应用程序，这意味着只有一个入口文件（只有一个html文件，通常为index.html），页面呈现方式不同，因为我们的js代码检查了url并决定了什么显示（使用哪个前端路由）。它们都在浏览器收到html文件以及包含的js / css文件后发生。接收页面请求时，所有后端都要做，就是发送相同的html文件（以及浏览器解析html后的js / css文件）。当然，对于data / xhr请求和无效请求，我们需要相应地发送数据和404.html。

在快速路线

1 个答案: