Отрисовка компонента React на экспресс-маршруте

У меня есть приложение, которое использует экспресс-сервер и интерфейс 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.info( "Server is running on port 5000 " );
});

Файл маршрута на стороне сервера выглядит следующим образом:

module.exports = ( app ) => {

    app.get( '/', ( req, res ) => {
        console.info("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'. Ясно, что я странным образом смешиваю серверную и клиентскую стороны.