How can I make a link that guides the user to a particular Stream Chat channel?

Question

I have a chat area in my app, implemented following mostly https://getstream.io/chat/demos/team/ .

I have a React router that displays the chat at /chat so that I can link to the chat section like this: <Link to="/chat" />

I'd like to add a link that starts in a particular channel, e.g. <Link to="/chat/general" /> or <Link to="/chat/random" />.

How could I implement this?

Answer 1

I recently implemented something like this using the router in NextJS.

I basically had my main chat page at /chat and then used the router to query the URL param which referenced the channel name. There is then a prop on the ChannelList stream react component customActiveChannel.

So for your chat/general example, you could use something like the following react component:

      <ChannelList
        filter={yourFilter}
        sort={yourSort}
        options={yourOptions}
        customActiveChannel={ChannelName || ""}
      />

Where ChannelName here is a variable for the channel name general say.

Here are the docs if you want to check more of the props: https://getstream.github.io/stream-chat-react/#!/ChannelList