2

我有一个使用快速服务器和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的 inApp.js会根据路由更改组件，但事实并非如此。我是，只获取快递数据。如何在路线上呈现我的Steam反应组件。express '/steam'显然，我正在以奇怪的方式混合服务器和客户端。

4

1 回答 1

1

只需res.render('index');用于所有后端路由。

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

于 2018-04-09T09:15:48.360 回答