I'm building an react app with an express backend. I'm now adding socket io chat functionality to the front end. Everything works as expected but now I want to access params from the url to set the socket-io channel name.
I want the user to visit localhost:3000/foo
and the react frontend to be able to access the foo
parameter.
What's the best way to do this?
At the moment I am serving the static files like so:
app.use(express.static(`${__dirname}/../client/dist`));
I tried to add react-router-dom with the following code but it doesnt display the page at all:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import App from './components/App.jsx';
ReactDOM.render(
<Router>
<Route path="/:id" component={App} />
</Router>,
document.querySelector('#app'));
Whenever I add something to the end of the url (I fi type in something other than ‘/‘ the page does not display. I get the error “cannot GET /foo”
I've also tried this but then the front end doesn't display either:
app.get('/:id', (req, res) => {
console.log('-----------', req.params.id)
})
My ultimate goal would be to only display the chat app when a user visits localhost:3000/chat/:channelId