Voting app (Full stack) - Node routes and React routes? Possible?

Trying to implement React Routes but get this vague.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of (Poll).
error message.

Tried adding the but that failed. Now the old code doesn’t even render.

import Component  from 'react';
import styles from '../layout/styles';
//import Link from 'react-router';

//{this.props.currentPoll.pollquestion}  use this instead of go to

class Poll extends Component {
    
    render() {
        
        const zoneStyle = styles.zone; // needs to be inside the render func!

        return ( <div style={zoneStyle.container}>
				    
				    <h2 style={zoneStyle.header}>
				        <a style={zoneStyle.title} href="#">{this.props.currentPoll.pollquestion}</a>
				    </h2>
				        <br/>
				        <span>by {this.props.currentPoll.author}</span>
				</div>
                );
    }
}

export default Poll;

// <Link to="/Polldetail">Go to</Link>  // tried this instead of the anchor tag

I’m now thinking this should be a single page app?

Perhaps instead of using href, use Link attribute from react-router?

You could do a single page app if you want to .

I ended up using Node and React (Redux and Router) for this project. React Router handled navigating different pages (Home, Sign In, Log In, My Votes) where as Node (or express.js in this case) handled fetching data from mongodb.

Let me know if you have any further questions.

Happy Coding!

1 Like

If you create a single-page application you can use react-router for client-side rendering only. On your server side, you would create a wildcard route like app.get("/*", (req, res, next) => { res.status(301).redirect("/"); }) to catch any requests and redirect them back to your root path. Then you can have navigation using Link to="/yourRoute" and a history like browserHistory and Link to allow users to click links and get to all the views in your app. In order to support direct links where a user types yourWebApp.com/yourRoute, you’ll have to incorporate server-side rendering with react-router. From what I can gather, this is generally a better approach for real-world apps that need to support typed addresses and SEO. When you have both, the app is “isomorphic” and views can be generated from both the client and server sides. Hope this helps!

React-router has a demo where you can check out an implementation https://github.com/ryanflorence/react-router-mega-demo

A popular isomorphic boilerplate with React https://github.com/kriasoft/react-starter-kit

1 Like