Rendering react component on express route

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">
                                <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;

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.

score 1 · Answer 1 · answered Apr 09 '18 at 09:15

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.

answered Apr 09 '18 at 09:15

JJPandari

3,454
1
17
24

It's not a single page application. I am making it a multi-page application. I am trying to redirect to the "/steam" route using tag and then render the "Steam" component there (I will make this Steam component a kind of single page application, so it's like each express route will have a single page application, like github, steam etc ). – kinny94 Apr 10 '18 at 17:01
@kiiiiNNNNNNNNNyyyy it's similar, just let backend routes return the page containing the frontend mounting point, e.g. you have a `#steam` DOM node in `steam.html`, and `ReactDOM.render(, document.getElementById('steam'));` for your frontend, then return `steam.html` for `/steam` at backend. But this may not be necessary, you can just put them together in `index.html` at frontend and use React-Router to control what content to render when a link takes the user to different pages. – JJPandari Apr 11 '18 at 07:03
@PanJunjie潘俊杰 that should work for a multipage system but i am using a single page app so what to do there? – akshay kishore Nov 15 '18 at 06:51
@akshaykishore That should be what my answer is talking about, but the answer and the above comment have quite similar solutions. "Let the backend return the right html", in short. – JJPandari Nov 16 '18 at 10:01

Rendering react component on express route

1 Answers1