点击链接后CSS受到干扰-反应路由器dom

Question

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

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

当我单击Link时，页面会渲染数据，但大多数css都没有正确渲染。我使用了材料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在我的应用中的应用

Answer 1

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

错误代码

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

修复

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