Estoy tratando de hacer una pequeña aplicación React y es la primera vez que uso el enrutador.
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 );Funciona muy bien y puedo usar http://localhost:3000/ y http://localhost:3000/shop, pero no cambia los archivos css.
ambos archivos CSS se cargan en ambas páginas
Sé que React es una aplicación de una página, pero dígame cómo eliminar el maldito App.css de http://localhost:3000/shop
Así que quiero App.css en http://localhost:3000/ y Shop.css en http://localhost:3000/shop
¡Estaría muy agradecido por cada respuesta!
No sé por qué estás declarando los estilos CSS mientras navegas por Routes.
Simplemente importe sus archivos CSS en su componente.js
Como en tu caso,
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 );Estos son sus componentes,
import "./App.css"; import React from 'react'; export default function App(){ //YOUR CODE HERE }Otro componente de la tienda
import "./shop.css"; import React from 'react'; export default function Shop(){ //YOUR CODE HERE }¡Esto funcionará bien!
Para agregar a lo que dijo Shivam, lo que está sucediendo con su código actualmente es que React está importando ambos archivos CSS y aplicándolos.
Esto se debe a que la sintaxis que está utilizando es incorrecta. No puede importar un archivo css como otra cosa: import styles1 from "./App.css" en realidad es solo importar App.css y aplicarlo a App.js y Shop.js.
Puede hacer lo que dijo Shivam, sin embargo, si desea diseñar su aplicación de reacción de la forma en que lo intentaba, puede usar módulos css .
Estos funcionan de la forma en que estaba tratando de usar un archivo css: puede importarlos y usar estilos en línea. Sin embargo, no recomendaría este enfoque, ya que tendría que diseñar cada expresión JSX en 'App.js' de esta manera. Simplemente configurar 'estilo = {estilo}' solo pasa un accesorio a App.js con ese componente de estilo, en realidad no lo aplica.
Echa un vistazo a este enlace . Cubre módulos css y algunas otras formas de diseñar css en reaccionar. ¡Mejor!