I am developing an application in React, the issue is as follows: It happened that I have a URL with a double slash within the URL, that is: "localhost:3000/tienda/tienda", when the URL has this feature it does not recognize me the jQuery, Bootstrap and Popper libraries, but if I only put:
<Route path="/tienda" exact component={Tienda} />
With this URL when I access it works and it recognizes the jquery libraries, popper, etc. all OK.
Now if I put:
<Route path="/tienda/tienda" exact component={Tienda} />
Bookstores no longer recognize me.
PS: I realize that the libraries do not recognize me because I have a menu that does not collapse, the example is this:
const ItemFiltro = props => {
return (
<div className='card card-collapse'>
<div className='card-header' role='tab' id={props.headerId}>
<h5 className='mb-0'>
<a
data-toggle='collapse'
href={`#${props.colapseId}`}
aria-expanded='true'
aria-controls={props.colapseId}
>
{props.titulo}
<i className='material-icons'>keyboard_arrow_down</i>
</a>
</h5>
</div>
<div
id={props.colapseId}
className='collapse show'
role='tabpanel'
aria-labelledby={props.headerId}
>
<div className='card-body card-refine'>
<ItemFiltroCheck item='Lenovo' />
<ItemFiltroCheck item='Acer' />
<ItemFiltroCheck item='HP' />
<ItemFiltroCheck item='MSI' />
</div>
</div>
</div>
)
}
export default ItemFiltro
I have tried to import the libraries in my index.html and my App.js and it does not work for me. In index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#212121" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>StoreSys - Tienda Online</title>
<!-- Fonts and icons -->
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
/>
<!-- CSS Files -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Core JS Files -->
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap-material-design.min.js"></script>
<script src="./assets/js/moment.min.js"></script>
<script src="./assets/js/material-kit.min.js"></script>
<script
src="https://use.fontawesome.com/releases/v5.15.3/js/all.js"
data-auto-a11y="true"
></script>
</body>
</html>
When this didn't work, what I did was in my App.js :
function App() {
const { user } = useSelector((state) => ({ ...state }));
const [email, setEmail] = useState("");
const dispatch = useDispatch();
useEffect(async () => {
appendScript("./assets/js/jquery.min.js");
appendScript("./assets/js/popper.min.js");
appendScript("./assets/js/bootstrap-material-design.min.j");
appendScript("./assets/js/moment.min.js");
appendScript("./assets/js/material-kit.min.js");
},[]);
useEffect(async () => {
setEmail(window.localStorage.getItem("emailForRegistration"));
if (email != "" && email != null) {
await currentUser({ email })
.then((res) => {
dispatch({
type: "LOGGED_IN_USER",
payload: {
name: res.data[0].Nombre,
email: res.data[0].Mail,
apellido: res.data[0].Apellido,
id_usuarios_tipos: res.data[0].id_usuarios_tipos,
_id: res.data[0].id,
},
});
})
.catch((err) => console.log(err));
}
}, [email]);
return (
<Router>
<div className="sidebar-collapse">
<Navbar />
<div className="separador"></div>
<Encabezado />
<div className="main main-raised">
<div className="container">
<Switch>
<Route path="/" exact component={Menu} />
<Route path="/login" exact component={Login} />
<Route path="/registro" exact component={Registro} />
<Route path="/tienda/tienda" exact component={Tienda} />
<Route path="/carrito" exact component={Carrito} />
<Route path="/articulo/:id" exact component={Articulo} />
<Route path="/formas-pago" exact component={FormasDePago} />
<Route exact path="/pagoMp/success/:idPago" component={PagoAprobado} />
</Switch>
</div>
</div>
<Footer />
</div>
</Router>
);
}
export default App;
But it still doesn't work for me.
The problem is that the url of your imports is relative to the url of where you are standing (
./assets/js/...
) being the.
one that indicates a relative path from where you are in thepathname
.Try with: