Question

我正在使用带有样式化组件和react-router的Create-react-app创建一个简单的配方检索应用程序。在原始组件上，path ='/'样式化的组件可以正常工作，但是当导航到不同的链接（例如，单个配方）时，所有样式都不起作用。我创建了一个虚拟测试组件，以查看该路由是否与样式兼容，并发现它仅在页面的第一次刷新时有效。如果链接回首页和虚拟组件，则样式将消失。

我尝试了不同类型的路由器，例如“ connected-react-router”和“ BrowerRouter”，我尝试了不同路径上的组件的render props方法，我尝试了在计算机上尖叫并打算退出webdev在一起，但现在似乎已不可行。谷歌上没有任何有益的指示指向太多。

这些是路线

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/recipe" component={Recipe} />
  <Route path="/other" component={Other} />
</Switch>

样式组件样式无效的示例

export const OtherCont = styled.div`
  background-color: blue;
`;

以及导航到该样式时无法正常工作的简单虚拟组件。

import { OtherCont } from './styled';

const Other = () => {
  return <OtherCont>bla</OtherCont>;
};

我之前已经写了很多样式化的组件，我不认为语法有问题，也许是样式化组件的版本有问题，或者对使用路由器的反应没有反应？

"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"styled-components": "^4.3.2"

样式化的组件样式无法在不同的React-Router路由上运行

0 个答案: