为什么我将其组件包装到 Route 标签后页面消失了？ [反应]

Question

我尝试在 React 中将 Login 组件包装到 Route 标签中，但现在它不再显示在页面中。你能告诉我这是怎么回事吗？

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;

Answer 1

在 react-router-dom v6 中，Route 组件在 element 属性上呈现其路由组件。 Route children 用于嵌套路由，嵌套的 Route 组件渲染为 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.

默认 <Route element> 是 <Outlet>。这意味着路线即使没有明确的 element 仍会呈现其 children prop，所以你可以嵌套路由路径而不用在 child 周围嵌套 UI 路线元素。

例如，在下面的配置中，parent 路由呈现一个 <Outlet> 默认情况下，因此 child 路由将在没有任何渲染的情况下呈现周围UI。但是 child 路由的路径是 /users/:id 因为它仍然以 parent.
为基础
<Route path="users">
  <Route path=":id" element={<UserProfile />} />
</Route>

为什么我将其组件包装到 Route 标签后页面消失了？ [反应]

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

reactjs

react-router

react-router-dom