I tried out to wrap a Login component into the Route tags in React, but now it doesn’t show up in the page anymore. Can you tell what’s going on, please?
import React, {useState, useReducer} from 'react';
import './App.css';
import Login from './components/Login.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<>
<Router>
<Routes>
<Route path="/something">
<Login />
</Route>
</Routes>
</Router>
</>
);
}
export default App;
>Solution :
In react-router-dom v6 the Route component renders its routed component on the element prop. Route children is used for nesting routes, the nested Route components get rendered into an Outlet.
<Router>
<Routes>
<Route path="/something" element={<Login />} />
</Routes>
</Router>
Whenever the location changes,
<Routes>looks through all its
children<Route>elements to find the best match and renders that
branch of the UI.<Route>elements may be nested to indicate nested
UI, which also correspond to nested URL paths. Parent routes render
their child routes by rendering an<Outlet>.<Routes> <Route path="/" element={<Dashboard />}> <Route path="messages" element={<DashboardMessages />} /> <Route path="tasks" element={<DashboardTasks />} /> </Route> <Route path="about" element={<AboutPage />} /> </Routes>Note:
If you’d prefer to define your routes as regular JavaScript objects
instead of using JSX, try useRoutes instead.The default
<Route element>is an<Outlet>. This means the route
will still render its children even without an explicitelement
prop, so you can nest route paths without nesting UI around the child
route elements.For example, in the following config the parent route renders an
<Outlet>by default, so the child route will render without any
surrounding UI. But the child route’s path is/users/:idbecause it
still builds on its parent.<Route path="users"> <Route path=":id" element={<UserProfile />} /> </Route>