Use Route Handler both in React and Node - node.js

Question

I am trying to show a component when someone goes to /videocall on the React side of my application.
<BrowserRouter>
<Route path="/videocall" component={VideoCall} />
</BrowserRouter>
and here's how someone can go to that route through a button click from a different component.
<Link to='/videocall'>
Go to Video Call
</Link>
And up until here it's working fine. I can see my new VideoCall component.
But I also want this route handler on the Node/Express side of my application so I can start a Socket.io server.
Since React and Express rendering are different so express doesn't know how to handle /videocall.
I am using it like below.
const socketIO = require('socket.io');
module.exports = (app, server) => {
app.get('/api/videocall', (req, res) => {
const io = socketIO(server);
io.on('connection', (socket) => {
console.log('User connected');
socket.on('message', (msg) => {
console.log(msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
});
}
And I am using a wildcard route match that will render the default index.html file like so:
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
And it's working fine. When I go to /videocall from the URL I get routed to my VideoCall component.
But the client is only getting connected to the socket server when I go to /api/videocall and not when I go to /videocall.
How do I resolve that since I want the client to get connected to the socket server when he goes to VideoCall component from a different component on the front end like so:
<Link to='/videocall'>
Go to Video Call
</Link>

Answer 1

So, I finally managed to make it work.
Here's how I did it.
I wrote my socket code in my index.js file and not in any route handler.
const socket = require('socket.io');
const PORT = process.env.PORT || 5000;
const server = app.listen(PORT);
const io = socket(server);
io.on('connection', (socket) => {
console.log('User connected');
socket.on('message', (msg) => {
console.log(msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
And in my VideoCall component I wrote my connect method inside componentDidMount lifecycle method. So now I am only connecting when I go that /videocall route.
import io from 'socket.io-client';
var socket;
class VideoCall extends Component {
componentDidMount() {
socket = io('http://localhost:5000');
}
}