Why does the page disappear after I wrapped its component into a Route tag? [ReactJS]

user_15797182 0
Viewed 434

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;
react-router-dom react-router reactjs
1 Answers

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>

Routes and Route

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 explicit element 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/:id because it still builds on its parent.

<Route path="users">
  <Route path=":id" element={<UserProfile />} />
</Route>
user_86908570
Related