路由中的反应开关 css

Question

我正在尝试制作一个小的 React 应用程序，这是我第一次使用路由器。

 import { render } from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Shop from './routes/shop'; import style1 from "./App.css"; import style2 from "./shop.css"; const rootElement = document.getElementById("root"); render( <BrowserRouter> <div style={style1}><Routes> <Route path="/" element={<App/>} /> </Routes></div> <div style={style2}><Routes> <Route path="shop" element={<Shop />}/> </Routes></div> </BrowserRouter>, rootElement );

它工作得很好，我可以使用 http://localhost:3000/ 和 http://localhost:3000/shop，但它不会切换 css 文件。

CSS 文件都加载到两个页面上

我知道 React 是一个单页应用程序，但请告诉我如何从 http://localhost:3000/shop 中删除 frickin App.css

So I want App.css on http://localhost:3000/ and Shop.css on http://localhost:3000/shop

我将非常感谢每一个答案！

Answer 1

我不明白你为什么在浏览路线时说 CSS styles。
只需在您的 component.js 中导入您的 CSS 文件
就像在你的情况下，

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Shop from './routes/shop';

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
        <Route path="/" element={<App/>} />
    </Routes>
    <Routes>
        <Route path="shop" element={<Shop />}/>
    </Routes>
  </BrowserRouter>,
  rootElement
);

这是你的组件，

import "./App.css";
import React from 'react';

export default function App(){
 //YOUR CODE HERE
}

另一个商店组件

import "./shop.css";
import React from 'react';

export default function Shop(){
 //YOUR CODE HERE
}

这会很好用！

Answer 2

补充一下 Shivam 所说的，你的代码目前发生的事情是 React 正在导入 CSS 文件并应用它们。

这是因为您使用的语法不正确。 您不能将 css 文件作为其他文件import styles1 from "./App.css"导入样式1实际上只是导入 App.css 并将其应用于 App.js 和 Shop.js。

你可以按照 Shivam 所说的去做，但是，如果你想按照你想要的方式设计你的 react 应用程序，你可以使用css modules 。

这些以您尝试使用 css 文件的方式工作 - 您可以导入它们并使用内联样式。 但是我不推荐这种方法，因为您必须以这种方式为“App.js”中的每个 JSX 表达式设置样式。 仅设置 'style={style}' 只会将带有该样式组件的道具传递给 App.js，它实际上并没有应用它。

看看这个链接。 它涵盖了 css 模块和其他一些在 react 中设置 css 样式的方法。 最好的！