CODEWITHSUNDEEP
node.jsreactjsexpressreact-routerexpress-router
kinny94
kinny94

Reputation: 374

Rendering react component on express route

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.

Upvotes: 2

Views: 11232

Answers (1)

JJPandari
JJPandari

Reputation: 3522

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.

Upvotes: 1

Related Questions