How do I access a backend route implemented with flask using react?

I am trying to incorporate a chatroom using socketio as a microservice in my flask app. Right now I have a routes.py file:

main_blueprint = Blueprint("main", __name__, template_folder='../templates', static_folder='../templates')



@main.route('/', methods=['GET', 'POST'])
def index():
    """Login form to enter a room."""
    form = LoginForm()
    if form.validate_on_submit():
        session['name'] = form.name.data
        session['room'] = form.room.data
        return redirect(url_for('.chat'))
    elif request.method == 'GET':
        form.name.data = session.get('name', '')
        form.room.data = session.get('room', '')

    return render_template('index.html', form=form)


@main.route('/chat')
def chat():
    """Chat room. The user's name and room must be stored in
    the session."""
    name = session.get('name', '')
    room = session.get('room', '')
    if name == '' or room == '':
        return redirect(url_for('.index'))

    return render_template('chat.html', name=name, room=room)

This logic renders two html files located in the ../templates file. However, the rest of my application is in a separate client service written in react. I would like to use a react component such as this:

import React from "react";
import io from 'socket.io-client';

class ChatRoom extends React.Component {
    state = {
        socketData: "",
        socketStatus:"On"
    }
    componentWillUnmount() {
        this.socket.close()
        console.log("component unmounted")
    }
    componentDidMount() {
        var sensorEndpoint = "http://localhost:5002"
            this.socket = io.connect(sensorEndpoint, {
            reconnection: true,
            // transports: ['websocket']
        });
        console.log("component mounted")
            this.socket.on("responseMessage", message => {
                this.setState({'socketData': message.temperature})

                console.log("responseMessage", message)
            })

    }
    handleEmit=()=>{
        if(this.state.socketStatus==="On"){
        this.socket.emit("message", {'data':'Stop Sending', 'status':'Off'})
        this.setState({'socketStatus':"Off"})
    }
    else{        
        this.socket.emit("message", {'data':'Start Sending', 'status':'On'})
        this.setState({'socketStatus':"On"})
        }
        console.log("Emit Clicked")
    }
    render() {
        return (
            <React.Fragment>
            <div>Data: {this.state.socketData}</div>
            <div>Status: {this.state.socketStatus}</div>
            <div onClick={this.handleEmit}> Start/Stop</div>
            </React.Fragment>
        )
    }
}
export default ChatRoom;

or this:

import React, { Component } from 'react'
import ControlBar from './ControlBar'
import Conversations from './Conversations'
import Flash from './Flash'
import io from 'socket.io-client';
import axios from 'axios';
const socket = io('http://localhost:5002')

class Chat extends Component {
    constructor (props) {
      super(props)
      this.state = {
        username: '',
        activeUsers: [],
        rooms: [],
        messages: [],
        flashNotice: ''
      }
      this.handleChange = this.handleChange.bind(this)
      this.joinRoom = this.joinRoom.bind(this)
      this.leaveRoom = this.leaveRoom.bind(this)
      this.sendMessage = this.sendMessage.bind(this)
      this.setUsername = this.setUsername.bind(this)
      this.createFlash = this.createFlash.bind(this)
      this.clearFlash = this.clearFlash.bind(this)
    }

    handleChange (event) {
      const {name, value} = event.target
      this.setState({ [name]: value })
    }

    setUsername (username) {
      const oldName = this.state.username
      if (oldName && oldName !== username) {
        socket.emit('deactivate_user', { username: oldName })
      }
      this.setState({ username }, () => {
        socket.emit('activate_user', { username: this.state.username })
      })
    }

    loadMessages () {
      const savedMessages = window.localStorage.getItem('messages')
      if (savedMessages) {
        this.setState({ messages: JSON.parse(savedMessages) || [] })
      }
    }

    setSocketListeners () {
      socket.on('message', (data) => {
        console.log(data.message)
      })

      socket.on('message_sent', (message) => {
        const room = message['room']
        this.setState({ messages: [...this.state.messages, message] }, () => {
          window.localStorage.setItem('messages', JSON.stringify(this.state.messages))
          if (this.state.rooms.indexOf(room) === -1) {
            this.setState({ rooms: [...this.state.rooms, room] })
          }
        })
      })

      socket.on('retrieve_active_users', () => {
        if (this.state.username) {
          socket.emit('activate_user', { username: this.state.username })
        }
      })

      socket.on('user_activated', (data) => {
        const user = data['user']
        const { activeUsers } = this.state
        if (activeUsers.indexOf(user) === -1 && user !== this.state.username) {
          this.setState({ activeUsers: [...activeUsers, user] }, () => {
            this.createFlash(`${user} is online`)
          })
        }
      })

      socket.on('user_deactivated', (data) => {
        const deactivatedUser = data['user']
        const { activeUsers } = this.state
        if (activeUsers.indexOf(deactivatedUser) !== -1) {
          this.setState({ activeUsers: activeUsers.filter((user) => {
            return user !== deactivatedUser
          })})
        }
      })

      socket.on('open_room', (data) => {
        const room = data['room']
        const openRooms = this.state.rooms
        const userInRoom = room.split('|').indexOf(this.state.username) !== -1
        const roomNotOpen = openRooms.indexOf(room) === -1
        if (userInRoom && roomNotOpen) {
          this.joinRoom(room, this.state.username)
        }
      })
    }

    joinRoom (room, username, partner) {
      room = room || [username, partner].sort().join('|')
      if (this.state.rooms.indexOf(room) === -1) {
        this.setState({rooms: [...this.state.rooms, room]}, () => {
          socket.emit('join_room', { username, room })
        })
      }
    }

    leaveRoom (room, username) {
      this.setState({ rooms: this.state.rooms.filter((r) => r !== room) })
    }

    sendMessage (message, room) {
      socket.emit(
        'send_message',
        {
          room,
          author: this.state.username,
          body: message,
          timeStamp: Date.now()
        }
      )
    }

    createFlash (text) {
      this.setState({flashNotice: ''}, () => {
        this.setState({flashNotice: text}, () => {
          window.setTimeout(this.clearFlash, 2500)
        })
      })
    }

    clearFlash () {
      this.setState({flashNotice: ''})
    }

    getChat() {
        return axios.get(`${process.env.REACT_APP_CHAT_SERVICE_URL}/chat`)
        .then((res) => {
            this.setState({
            exercises: res.data.data.exercises,
            currentExercise: 0,
            });
            this.renderButtons();
        })
        .catch((err) => { console.log(err); });
        };
    componentDidMount () {
      this.getChat()
      this.loadMessages()
      this.setSocketListeners()
    }

    render () {
      const {username, rooms, messages, flashNotice} = this.state

      return (
        <div className='App'>
          <div className='header'>
            {/* <img className='logo' src={logo} alt='logo' /> */}
            <h1 className='title'>Fat Chat</h1>
          </div>
          <Flash notice={flashNotice} />
          <ControlBar
            activeUsers={this.state.activeUsers}
            setUsername={this.setUsername}
            createFlash={this.createFlash}
            joinRoom={this.joinRoom} />
          <Conversations
            rooms={rooms}
            messages={messages}
            username={username}
            leaveRoom={this.leaveRoom}
            sendMessage={this.sendMessage} />
        </div>
      )
    }
  }



export default Chat;

to play the role of the chat.html file:

    <head>
        <title>Flask-SocketIO-Chat: {{ room }}</title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            var socket;
            $(document).ready(function(){
                socket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
                socket.on('connect', function() {
                    socket.emit('joined', {});
                });
                socket.on('status', function(data) {
                    $('#chat').val($('#chat').val() + '<' + data.msg + '>n');
                    $('#chat').scrollTop($('#chat')[0].scrollHeight);
                });
                socket.on('message', function(data) {
                    $('#chat').val($('#chat').val() + data.msg + 'n');
                    $('#chat').scrollTop($('#chat')[0].scrollHeight);
                });
                $('#text').keypress(function(e) {
                    var code = e.keyCode || e.which;
                    if (code == 13) {
                        text = $('#text').val();
                        $('#text').val('');
                        socket.emit('text', {msg: text});
                    }
                });
            });
            function leave_room() {
                socket.emit('left', {}, function() {
                    socket.disconnect();

                    // go back to the login page
                    window.location.href = "{{ url_for('main.index') }}";
                });
            }
        </script>
    </head>
    <body>
        <h1>Flask-SocketIO-Chat: {{ room }}</h1>
        <textarea id="chat" cols="80" rows="20"></textarea><br><br>
        <input id="text" size="80" placeholder="Enter your message here"><br><br>
        <a href="#" onclick="leave_room();">Leave this room</a>
    </body>
</html>

Currently, when I type the url localhost://chat into the address bar I get my html, however when I try to access the route, client-side using axios I get rendered jsx. Only when I refresh the
page do I get the served template.

I would like to understand how to get the frontend and backend of my application literally and figuratively on the same page. Both sides are unable to “agree” on what should be rendered and I don’t understand whether I should tell the flask backend to serve a “react” template or if I should tell the react front-end that it should be retrieving data from a specific route.

I thank everyone for their time and feedback. I am struggling to understand what is going on and hope this question is well enough described. If you want to take a look at the source it is located at:

https://github.com/smeyerhot/appster

Source: StackOverflow