如何在 react-router-dom v5 中使用 Link 传递和拦截数据

Question

I am making a simple chat-app. Users submit a form with name and room, and are sent to the room, with the username. The problem is, I cannot figure out how to pass the username through via the Link. This is the relevant code:

<Link to={{pathname: `/${room}`, state: {the: user} }}> Enter room </Link>

I use simple useState-hooks to set room and username from input. From what I have read, this way of doing it is deprecated, and I cannot find a proper answer for react-router-dom v5, only 4 and below.

Also, I have no idea how I am supposed to intercept this data. This is my App.js code:

return(
        <Router>
            <div className='app' >
                <Switch>
                    <Route exact path='/' >
                        <Menu />
                    </Route>

                    <Route exact path='/:room' >
                        <ChatApp />
                    </Route>
                </Switch>
            </div>
        </Router>
    );

So as you can see, the link sends you to the ChatApp component. To make it as simple as possible, the top of that looks like this:

const ChatApp = (props) => {

but when I console.log(props), all I get is an empty array. Does anyone know a reliable way of passing and intercepting data via Links? Perhaps it should be done a different way?

Answer 1

Not necessarily the right answer, but the way things look, in rrd@5, you cannot, and you are forced to send the props as params. Not sure for objects though