时间戳

首页 > 解决方案 > 单击链接后CSS受到干扰-react-router-dom

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

问题描述

我正在导出链接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>

应用程序.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

标签： reactjsreact-routermaterial-uistyled-components

解决方案

我不知道为什么会产生该错误，因为尽管我已修复它仍然没有任何意义

错误代码

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

使固定

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

推荐阅读