Rendering react component on express route - node.js

Question

I have an application which uses the express server and the create-react-app front-end. The structure looks like this. ( Not including all the files in the structure - only the ones that matters )
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
My index.js file is starting the express server and is as following-
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 " );
});
The route file on the server side is as follows-
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!!");
});
}
My app.js file
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;
On my client side, my main concerned file in landing.js which is as follows.
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">
Steam Info
</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">
Github Info
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Landing;
In the above component, the thing that i care about is the a tag which leads to the either /steam or /github express route, which is intentional cause i want to reload the page and on the page I am only getting the res.send data, which makes sense cause that's an express route. But I want to render my steam component on /steam route. ( same with github ). I was hoping my BrowserRouter in App.js would change the component based on the route, but It's not. I am, only getting the express data. How can I render my Steam react component on the express '/steam' route. Clearly I am mixing the server and client side in weird way.

Answer 1

Simply use res.render('index'); for all backend routes.
Here we are building a single-page app with react, which means there's only one entry file (only one html file, usually index.html), the page renders differently because our js code checks the url and decides what to show (which frontend route to use). They all happend after the browser receives the html file along with the js/css files included. All the backend has to do when receiving a page request, is to send the same html file (and js/css files after the html is parsed by browser). Of course for data/xhr requests and invalid requests, we need to send data and 404.html accordingly.