Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading