Consider the following React Code. What will be the output when we go to route “/dogs/1”?function App() {    return (        <div className="App">            <Switch>                <Route exact path="/" component={Home} />                <Route path="/:animal" exact component={Animal} />                <Route path="/:animal/:id" exact component={Animal} />            </Switch>        </div>    );}function Animal() {    let params = useParams();    return (        <div>            <div>{params.animal}</div>            <div>{params.id ? params.id : 0}</div>        </div>    );}Adogs0Bdogs1Cno-animal0DHome Component will be rendered

Q1 of 4outlined_flagWhich react router property is used to specify, the component to be rendered when a route is encountered?elementcomponentpathto

Which route is not valid for this React Router component? <Routes> <Route path='/' element={<Home />} /> <Route path='/user/:id' element={<User />} /> <Route path='/user/:id/edit' element={<UserEdit />} /> <Route path='/post/:id' element={<Post />} /> <Route path='/posts' element={<Posts />} /></Routes>  Pick ONE option/user/1/edit/post/10/post/profile/12

Q3 of 4outlined_flaguseParams hook is used to configure routes programmatically in React? State True or False. TrueFalse

Which operator can be used to conditionally render a React component?

What is the output of the following code snippet?function ParentComponent() { const data = { name: "John Doe", age: 30 }; return ( <div> <ChildComponent data={data}> <h3>This is a child element</h3> </ChildComponent> </div> ); } function ChildComponent(props) { const { name, age } = props.data; return ( <div> <h2>Name: {name}</h2> <h2>Age: {age}</h2> {props.children} </div> ); }AName: John Doe Age: 30This is a child elementBName: undefined Age: undefinedThis is a child elementCName: null Age: nullThis is a child elementDSyntax error