单击链接后CSS受到干扰-react-router-dom答案

【问题标题】：CSS gets disturbed after Link is clicked - react-router-dom单击链接后CSS受到干扰-react-router-dom
【发布时间】：2020-12-09 03:31:40
【问题描述】：

我将 Link 导出为 import { Link } from "react-router-dom"，并且在我的 JSX 中有

<Link to='/'>Back</Link>

当我单击Link 时，页面会呈现数据，但大多数css 未正确呈现。我使用了material-ui链接，但问题仍然存在。

import { Link } from "@material-ui/core";
<Link onClick={() => history.push('/')}> Back </Link>

app.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Dashboard from "./containers/landing_page";
import store from "./store";
import { Provider } from "react-redux";

import "./App.css";

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route path="/" component={Dashboard} />
        </Switch>
      </Router>
    </Provider>
  );
}

export default App;

PS：如果有帮助，我将在我的应用程序中使用 @material-ui/core 和 styled-components

【问题讨论】：

“大多数 css 未正确呈现”是什么意思。 ?您能否详细说明，因为<Link> 根本不影响 CSS。要么是 <Link> 路由到的端点没有正确配置 css。
填充和字体大小受到干扰。我希望我可以分享屏幕截图，但它是私人的
这可能是一个css 的问题。您前进的路线中可能有一些元素导致填充和字体大小的“干扰”

标签： reactjs react-router material-ui styled-components

【解决方案1】：

我不知道为什么会产生这个错误，因为虽然我修复了它仍然没有任何意义

错误代码

{ 
  product ? 
    <Grid>
      <Link to='/'>Back</Link>
      <Product product={product} />
    </Grid> : null
}

修复

<Grid>
  <Link to='/'>Back</Link>
  {
    product ? <Product product={product} /> : null 
  }
</Grid>

【讨论】：