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.

JJPandari · Accepted Answer · 2018-04-09 09:15:48Z

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 9, 2018 at 9:15

JJPandari

3,5221 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kinny94 Over a year ago

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 <a> 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 ).

JJPandari Over a year ago

@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(<SteamPage/>, 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.

akshay kishore Over a year ago

@PanJunjie潘俊杰 that should work for a multipage system but i am using a single page app so what to do there?

JJPandari Over a year ago

@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.

Collectives™ on Stack Overflow

Rendering react component on express route

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related