html React路由为页面增加了边距

fafcakar 于 2022-12-02 发布在 React

关注(0)|答案(1)|浏览(141)

这似乎没有任何意义，但我会解释并添加代码。
昨天在我的应用程序上工作时，我突然意识到页面的边框上有不必要的边距。如果你不重置边距和填充，就会出现这种类型的边距。
我试着从源头上消除一些东西，发现只有在添加了一条路线（不管是哪条路线）之后，我才能得到这些余量。
我试着检查其中一个页面（可能是我在所有页面中都犯了一些错误），在没有发现问题后，我决定创建一个完全空白的测试页面。如果我将路线添加到该页面，则会显示边距。如果我不添加，则不会显示边距。原因可能是什么？
下面附上代码。
index.tsx

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store/store";
import { App } from "./App";
import "./styles.css";

const container = document.getElementById("root")!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

styles.css

* {
    margin: 0px;
    padding: 0px;
    font-family: Cabin;
}

App.tsx

import { Route } from "react-router-dom";
import Wrapper from "./wrapper";
import {
  TestPage,
} from "./pages";

export function App() {

  return (
    <Wrapper data-test="app">
      <Route path="/" element={<TestPage />} />
    </Wrapper>
  );
}

TestPage（它从index.ts文件导入和重新导出，然后再从主“pages”索引文件导入和重新导出。这些文件只是简单地重新导出下面的组件。

import { Box } from "rebass";
import { TestPresentational } from "../presentational";

export const TestContainer = () => {
  return <Box>Hola</Box>;
};

为了以防万一，这是我的public index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <title>Travel buddy</title>
</head>

<body>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

编辑：有人问Box组件是否可以添加边距。我试过从App.tsx而不是 Package 器组件返回它，没有问题。

return (
     <Box
       sx={{
         width: "100vw",
         height: "100vh",
         backgroundColor: "blue",
         margin: "0px",
         padding: "0px",
       }}
     ></Box>
   );

因此，组件不是问题所在。不过，一个有趣的事情是，如果我返回了它，而没有注解掉 Package 器返回（但使其代码不可访问），我又得到了边距。

Html

来源：https://stackoverflow.com/questions/74641496/react-route-adds-margin-to-the-page