Last active
January 9, 2024 02:52
-
-
Save digitallysavvy/a55ec3957246bff5b4c20c0b5d3637fd to your computer and use it in GitHub Desktop.
App.tsx for implementing the Agora RTC React SDK using routes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Route, Routes, useNavigate } from 'react-router-dom' | |
| import { ConnectForm } from './components/ConnectForm' | |
| import { LiveVideo } from './components/LiveVideo' | |
| import AgoraRTC, { | |
| AgoraRTCProvider, | |
| useRTCClient, | |
| } from "agora-rtc-react"; | |
| import './App.css' | |
| function App() { | |
| const navigate = useNavigate() | |
| const agoraClient = useRTCClient( AgoraRTC.createClient({ codec: "vp8", mode: "rtc" })); // Initialize Agora Client | |
| const handleConnect = (channelName: string) => { | |
| navigate(`/via/${channelName}`) // on form submit, navigate to new route | |
| } | |
| return ( | |
| <Routes> | |
| <Route path='/' element={ <ConnectForm connectToVideo={ handleConnect } /> } /> | |
| <Route path='/via/:channelName' element={ | |
| <AgoraRTCProvider client={agoraClient}> | |
| <LiveVideo /> | |
| </AgoraRTCProvider> | |
| } /> | |
| </Routes> | |
| ) | |
| } | |
| export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment