Вышеуказанный запрос был решен, но возникла новая проблема.Я использую materialize.css для использования модальных и слайдер.Теперь, когда я захожу на страницу администратора, они не работают.Я просто показываю серый экран в слайдере, и модал не активируется.Инициализация js находится в моем index.html, которым я делюсь ниже, и на странице администратора, которая содержит модальный код и код слайдера.index.html-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-
manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-
2.1.1.min.js">
</script>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
$(document).ready(function () {
// the "href " attribute of .modal-trigger must specify the modal ID that wants to be triggered
$(".sidenav-trigger").sideNav();
$(".carousel").carousel();
$(".modal-trigger").leanModal();
$('.slider').slider({ full_width: true });
})
</script>
</body>
</html>
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import BillForm from "./BillForm";
import { addBill } from "../actions/Bill";
import AddBillerForm from "./AddBillerForm";
import { addBiller } from "../actions/Biller";
import Image from "../images/main.jpg";
import Image3 from "../images/Photo3.jpg";
import Footer from "./Footer";
import { fetchAdmin, adminLogout } from "../actions/Admin";
import Slider from "./Slider";
class AdminPage extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.dispatch(fetchAdmin());
}
onLogout() {
this.props.dispatch(adminLogout());
this.props.history.push("/");
}
render() {
if (this.props.Admin.length < 1) {
return <div>No data</div>;
}
if (this.props.Admin.length >= 1) {
if (!this.props.Admin[0].Login) {
return <div>Not logged in as admin</div>;
}
if (this.props.Admin[0].Login) {
return (
<div>
<nav>
<div className="nav-wrapper">
<Link to="/adminpage">
<h3 className="left brand-logo">Bill Payment</h3>
</Link>
<ul className="right">
<li>
<Link className="btn-small" to="viewbiller">
View Biller
</Link>
</li>
<li>
<Link className="btn-small modal-trigger" to="#modal2">
Add Biller
</Link>
</li>
<li>
<Link className="btn-small" to="/generatedbills">
Generated Bills List
</Link>
</li>
<li>
<Link className="btn-small modal-trigger" to="#modal1">
Generate New Bill
</Link>
</li>
<li>
<button className="btn-small btn-flat teal">
Top Bill Payments
</button>
</li>
<li>
<button
className="btn-small btn-flat white-text"
onClick={e => this.onLogout()}
>
Logout
</button>
</li>
</ul>
</div>
</nav>
<div id="modal1" className="modal">
<div className="modal-content">
<div>
<p>Generate New Bill for User</p>
<BillForm
onSubmit={(bill = {}) => {
this.props.dispatch(addBill(bill));
this.props.history.push("/adminpage");
}}
/>
</div>
</div>
<div className="modal-footer red lighten-2">
<Link
to="#!"
className=" modal-action modal-close waves-effect waves-green
btn-flat"
>
Close
</Link>
</div>
</div>
<div id="modal2" className="modal">
<div className="modal-content">
<div className="">
<div className="green white-text">
<h3>Add Biller</h3>
</div>
<AddBillerForm
onSubmit={(biller = {}) => {
this.props.dispatch(addBiller(biller));
}}
/>
</div>
</div>
<div className="modal-footer red lighten-2">
<a
href="#!"
className=" modal-action modal-close waves-effect waves-green
btn-flat"
>
Close
</a>
</div>
</div>
<div>
<Slider />
</div>
<Footer />
</div>
);
}
}
}
}
const mapStateToProps = state => {
return { Admin: state.Admin };
};
export default withRouter(connect(mapStateToProps)(AdminPage));