node.js - 高速ルートでの反応コンポーネントのレンダリング

Question

Express サーバーと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につながるタグです。これは、ページをリロードしたい意図的な原因であり、ページ上でデータを取得しているだけです。これは理にかなった原因です特急ルート。しかし、ルート上でコンポーネントをレンダリングしたいです。( github と同じ)。私のインがルートに基づいてコンポーネントを変更することを望んでいましたが、そうではありません。私は、高速データのみを取得しています。ルートで反応コンポーネントをレンダリングするにはどうすればよいですか。明らかに、サーバー側とクライアント側を奇妙な方法で混在させています。/steam/githubres.sendsteam/steamBrowserRouterApp.jsSteamexpress '/steam'